Как настроить горизонтальную гистограмму в макете? - PullRequest
Новая
       22

Как настроить горизонтальную гистограмму в макете?

0 голосов
/ 27 апреля 2019

В этом макете я использую Горизонтальный график и ratingBar виджет. Я хочу, чтобы каждый бар находился перед своим собственным рейтингом. Я изменяю barWidth графика, но не могу настроить макет. Это мой макет XML: 

 <LinearLayout
                            android:id="@+id/layoutRating"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal"
                            android:layout_marginTop="20dp"
                            android:layout_below="@+id/txtLabelRate"
                            android:visibility="visible">
                            <com.github.mikephil.charting.charts.HorizontalBarChart
                                android:id="@+id/barChart"
                                android:layout_width="0dp"
                                android:layout_height="wrap_content"
                                android:layout_weight="1"/>
                            <RelativeLayout
                                android:layout_width="0dp"
                                android:layout_height="250dp"
                                android:layout_weight="1"
                                android:layout_marginStart="10dp">
                                <RatingBar
                                    android:id="@+id/ratingBarFive"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    style="?android:attr/ratingBarStyleSmall"
                                    android:theme="@style/RatingBar"
                                    android:rating="5"/>
                                <TextView
                                    android:id="@+id/txtPercentFive"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="@{courseItem.percentageEachRating.get(0)+'%'}"
                                    android:layout_toEndOf="@+id/ratingBarFive"
                                    android:layout_marginStart="15dp"/>
                                <RatingBar
                                    android:id="@+id/ratingBarFour"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    style="?android:attr/ratingBarStyleSmall"
                                    android:theme="@style/RatingBar"
                                    android:layout_below="@+id/ratingBarFive"
                                    android:rating="4"
                                    android:layout_marginTop="10dp"/>
                                <TextView
                                    android:id="@+id/txtPercentFour"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="@{courseItem.percentageEachRating.get(1)+'%'}"
                                    android:layout_below="@+id/ratingBarFive"
                                    android:layout_toEndOf="@+id/ratingBarFour"
                                    android:layout_marginStart="15dp"/>
                                <RatingBar
                                    android:id="@+id/ratingBarThree"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    style="?android:attr/ratingBarStyleSmall"
                                    android:theme="@style/RatingBar"
                                    android:layout_below="@+id/ratingBarFour"
                                    android:rating="3"
                                    android:layout_marginTop="10dp"/>
                                <TextView
                                    android:id="@+id/txtPercentThree"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="@{courseItem.percentageEachRating.get(2)+'%'}"
                                    android:layout_below="@+id/ratingBarFour"
                                    android:layout_toEndOf="@+id/ratingBarThree"
                                    android:layout_marginStart="15dp"/>
                                <RatingBar
                                    android:id="@+id/ratingBarTwo"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    style="?android:attr/ratingBarStyleSmall"
                                    android:theme="@style/RatingBar"
                                    android:layout_below="@+id/ratingBarThree"
                                    android:rating="2"
                                    android:layout_marginTop="10dp"/>
                                <TextView
                                    android:id="@+id/txtPercentTwo"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="@{courseItem.percentageEachRating.get(3)+'%'}"
                                    android:layout_below="@+id/ratingBarThree"
                                    android:layout_toEndOf="@+id/ratingBarTwo"
                                    android:layout_marginStart="15dp"/>
                                <RatingBar
                                    android:id="@+id/ratingBarOne"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    style="?android:attr/ratingBarStyleSmall"
                                    android:theme="@style/RatingBar"
                                    android:layout_below="@+id/ratingBarTwo"
                                    android:rating="1"
                                    android:layout_marginTop="10dp"/>
                                <TextView
                                    android:id="@+id/txtPercentOne"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="@{courseItem.percentageEachRating.get(4)+'%'}"
                                    android:layout_below="@+id/ratingBarTwo"
                                    android:layout_toEndOf="@+id/ratingBarOne"
                                    android:layout_marginStart="15dp"/>
                            </RelativeLayout>
                        </LinearLayout>

И это мой вывод:

My outPut

И это вывод, который я хочу:

А это мой код для набора диаграмм: 

 private void setGraph(){
    mBinding.barChart.getDescription().setEnabled(false);

    mBinding.barChart.setDrawBarShadow(false);
    mBinding.barChart.getLegend().setEnabled(false);
    mBinding.barChart.setPinchZoom(false);
    mBinding.barChart.setDrawValueAboveBar(false);

    XAxis xAxis=mBinding.barChart.getXAxis();
    xAxis.setDrawGridLines(false);
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    xAxis.setEnabled(true);
    xAxis.setDrawAxisLine(false);

    YAxis yAxis=mBinding.barChart.getAxisLeft();
    yAxis.setAxisMaximum(100f);
    yAxis.setAxisMinimum(0f);
    yAxis.setEnabled(false);

    xAxis.setLabelCount(5);


    YAxis yRight=mBinding.barChart.getAxisRight();
    yRight.setDrawAxisLine(true);
    yRight.setDrawGridLines(false);
    yRight.setEnabled(false);

    mBinding.barChart.animateY(2000);

    mBinding.barChart.setDrawBarShadow(true);

    mBinding.barChart.getAxisLeft().setDrawLabels(false);
    mBinding.barChart.getAxisRight().setDrawLabels(false);
    mBinding.barChart.getXAxis().setDrawLabels(false);
}
private void setDataChart(){
    ArrayList<String> percentageEachRating=currentCourse.getPercentageEachRating();
    ArrayList<BarEntry> entries=new ArrayList<>();
    float barWidth=1f;
    float spaceForBar=7f;
    for (int i=0;i<percentageEachRating.size();i++){
        float val=Float.valueOf(percentageEachRating.get(i));
        entries.add(new BarEntry(i*spaceForBar,val));
    }

    BarDataSet set=new BarDataSet(entries,"Data set1");
    set.setDrawValues(false);
    set.setColors(ContextCompat.getColor(getContext(),R.color.colorRateOne),
            ContextCompat.getColor(getContext(),R.color.colorRateTwo),
            ContextCompat.getColor(getContext(),R.color.colorRateThree),
            ContextCompat.getColor(getContext(),R.color.colorRateFour),
            ContextCompat.getColor(getContext(),R.color.colorRateFive));
    mBinding.barChart.setDrawBarShadow(true);
    set.setBarShadowColor(Color.argb(40,150,150,150));
    BarData data=new BarData(set);
    data.setBarWidth(barWidth);
    mBinding.barChart.setData(data);
    mBinding.barChart.invalidate();
}

1 Ответ

4 голосов
/ 27 апреля 2019

вы можете создать макет, как показано ниже

XML-макет 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:orientation="vertical"
    tools:context=".contentfilters">

    <LinearLayout
        android:id="@+id/layoutRating"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:visibility="visible">


        <ProgressBar
            android:id="@+id/progress"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_weight="1"
            android:max="100"
            android:progress="54"
            android:progressDrawable="@drawable/progress_bar" />

        <RatingBar
            android:id="@+id/ratingBarFive"
            style="?android:attr/ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rating="5" />

        <TextView
            android:id="@+id/txtPercentFive"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2.5"
            android:gravity="center"
            android:text="54%" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:visibility="visible">


        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_weight="1"
            android:max="100"
            android:progress="34"
            android:progressDrawable="@drawable/progress_bar" />

        <RatingBar
            style="?android:attr/ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rating="4" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2.5"
            android:gravity="center"
            android:text="34%" />


    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:visibility="visible">


        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_weight="1"
            android:max="100"
            android:progress="10"
            android:progressDrawable="@drawable/progress_bar" />

        <RatingBar
            style="?android:attr/ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rating="3" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2.5"
            android:gravity="center"
            android:text="10%" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:visibility="visible">


        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_weight="1"
            android:max="100"
            android:progress="2"
            android:progressDrawable="@drawable/progress_bar" />

        <RatingBar
            style="?android:attr/ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rating="2" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2.5"
            android:gravity="center"
            android:text="2%" />


    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:visibility="visible">


        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_weight="1"
            android:max="100"
            android:progress="1"
            android:progressDrawable="@drawable/progress_bar" />

        <RatingBar
            style="?android:attr/ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rating="1" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2.5"
            android:gravity="center"
            android:text="1%" />


    </LinearLayout>

</LinearLayout>

progress_bar.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>
            <solid android:color="#F1F2F4" />
        </shape>
    </item>


    <item android:id="@android:id/progress">
        <clip>
            <shape>

                <solid android:color="#A2A5B4" />
            </shape>
        </clip>
    </item>


</layer-list>

выход

enter image description here

...