Android水平图矩阵（见附件设计）

Question

我尝试使用 MPChart Android 库，但无法创建这种类型的布局。

有1-24小时是固定的，5种小时是固定的，我们只需要设置这5小时的数据即可。

请查看这张图片并帮助我解决问题

enter image description here

Answer 1

试试下面的代码：

activity_graph.xml:

        <?xml version="1.0" encoding="utf-8"?>
            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:weightSum="3"
                >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:orientation="vertical"
                    android:weightSum="5"
                    android:layout_weight="1.2"
                    android:layout_height="match_parent">
                    <TextView
                        android:layout_width="match_parent"
                        android:text="TExxt v1"
                        android:gravity="center"
                        android:layout_weight="1"
                        android:layout_height="match_parent" />
                    <TextView
                        android:layout_width="match_parent"
                        android:text="TExxt v2"
                        android:gravity="center"
                        android:layout_weight="1"
                        android:layout_height="match_parent" />
                    <TextView
                        android:layout_width="match_parent"
                        android:text="TExxt v3"
                        android:gravity="center"
                        android:layout_weight="1"
                        android:layout_height="match_parent" />
                    <TextView
                        android:layout_width="match_parent"
                        android:text="TExxt v4"
                        android:gravity="center"
                        android:layout_weight="1"
                        android:layout_height="match_parent" />
                    <TextView
                        android:layout_width="match_parent"
                        android:text="TExxt v5"
                        android:gravity="center"
                        android:layout_weight="1"
                        android:layout_height="match_parent" />
                </LinearLayout>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:orientation="vertical"
                    android:layout_weight="0.6"
                    android:background="@color/colorAccent"
                    android:layout_height="match_parent">
                    <HorizontalScrollView
                        android:layout_width="match_parent"
                        android:scrollbars="none"
                        android:layout_height="match_parent">
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:orientation="horizontal"
                            android:id="@+id/views"
                            android:padding="1dp"
                            android:layout_height="wrap_content">
                        </LinearLayout>
                    </HorizontalScrollView>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:weightSum="5"
                        android:orientation="vertical"
                        android:layout_height="match_parent">
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_weight="1"
                            android:layout_height="match_parent">
                        <ProgressBar
                            style="@android:style/Widget.ProgressBar.Horizontal"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:max="100"
                            android:progress="10"
                            android:progressDrawable="@drawable/custom_progressbar"
                             />
                        </LinearLayout>
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_weight="1"
                            android:layout_height="match_parent">
                            <ProgressBar
                                style="@android:style/Widget.ProgressBar.Horizontal"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:max="100"
                                android:progress="80"
                                android:progressDrawable="@drawable/custom_progressbar"
                                />
                        </LinearLayout>
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_weight="1"
                            android:layout_height="match_parent">
                            <ProgressBar
                                style="@android:style/Widget.ProgressBar.Horizontal"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:max="100"
                                android:progress="20"
                                android:progressDrawable="@drawable/custom_progressbar"
                                />
                        </LinearLayout>
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_weight="1"
                            android:layout_height="match_parent">
                            <ProgressBar
                                style="@android:style/Widget.ProgressBar.Horizontal"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:max="100"
                                android:progress="30"
                                android:progressDrawable="@drawable/custom_progressbar"
                                />
                        </LinearLayout>
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_weight="1"
                            android:layout_height="match_parent">
                            <ProgressBar
                                style="@android:style/Widget.ProgressBar.Horizontal"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:max="100"
                                android:progressDrawable="@drawable/custom_progressbar"
                                android:progress="45"
                                />
                        </LinearLayout>

                    </LinearLayout>
                </RelativeLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:orientation="vertical"
                    android:weightSum="5"
                    android:layout_weight="1.2"
                    android:layout_height="match_parent">
                    <TextView
                        android:layout_width="match_parent"
                        android:text="TExxt v1"
                        android:gravity="center"
                        android:layout_weight="1"
                        android:layout_height="match_parent" />
                    <TextView
                        android:layout_width="match_parent"
                        android:text="TExxt v2"
                        android:gravity="center"
                        android:layout_weight="1"
                        android:layout_height="match_parent" />
                    <TextView
                        android:layout_width="match_parent"
                        android:text="TExxt v3"
                        android:gravity="center"
                        android:layout_weight="1"
                        android:layout_height="match_parent" />
                    <TextView
                        android:layout_width="match_parent"
                        android:text="TExxt v4"
                        android:gravity="center"
                        android:layout_weight="1"
                        android:layout_height="match_parent" />
                    <TextView
                        android:layout_width="match_parent"
                        android:text="TExxt v5"
                        android:gravity="center"
                        android:layout_weight="1"
                        android:layout_height="match_parent" />
                </LinearLayout>


            </LinearLayout>

图表Activity：

            import android.graphics.Color;
            import android.support.v7.app.AppCompatActivity;
            import android.os.Bundle;
            import android.util.Log;
            import android.view.View;
            import android.view.ViewGroup;
            import android.widget.LinearLayout;

            public class GraphActivity extends AppCompatActivity {

                private LinearLayout views;
                @Override
                protected void onCreate(Bundle savedInstanceState) {
                    super.onCreate(savedInstanceState);
                    setContentView(R.layout.activity_graph);
                    views = (LinearLayout)findViewById(R.id.views);
                    addViews();
                }
                private void addViews(){
                    views.removeAllViews();
                    for(int i =0;i<24;i++){
                        views.addView(getLinearLayoutView());
                    }
                }

                private LinearLayout getLinearLayoutView(){
                    LinearLayout linearLayout = new LinearLayout(this);
                    linearLayout.setOrientation(LinearLayout.VERTICAL);
                    linearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));

                    int h = getResources().getDisplayMetrics().heightPixels/6;
                    Log.d("DevicdInfo", "Device info: "+h +" / "+getResources().getDisplayMetrics().heightPixels);
                    for(int j=0;j<5;j++){
                        View v = new View(this);
                        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(h,h);
                        lp.setMargins(0,0,10,10);
                        v.setLayoutParams(lp);
                        v.setPadding(0,0,10,10);
                        v.setBackgroundColor(Color.WHITE);
                        linearLayout.addView(v);
                    }
                    return linearLayout;
                }
            }

custom_progressbar.xml:

     <?xml version="1.0" encoding="utf-8"?>
            <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
                <item android:id="@android:id/background">
                    <shape>
                        <gradient
                            android:startColor="@android:color/transparent"
                            android:centerColor="@android:color/transparent"
                            android:endColor="@android:color/transparent"
                            android:angle="270"
                            />
                    </shape>
                </item>


                <item android:id="@android:id/progress">
                    <clip>
                        <shape>
                            <gradient
                                android:startColor="#ff0000"
                                android:centerColor="#ff0000"
                                android:endColor="#ff0000"
                                android:angle="270"
                                />
                        </shape>
                    </clip>
                </item>
            </layer-list>

Manifest 更改：

      <activity android:name=".GraphActivity"
        android:screenOrientation="landscape"></activity>

Android水平图矩阵（见附件设计）

Android Horizontal Graph Matrix (see atached design)

android

android-layout

android-graphview

mpandroidchart