如何在android中创建自定义视图

时间:2017-06-02 11:05:00

标签: android user-interface

我正在创建一个如下设计的视图

enter image description here

请建议创建此类自定义视图的方法。

1 个答案:

答案 0 :(得分:1)

您需要为此

创建两个可绘制文件

在res>中创建这两个文件可绘制

<强> 1。 circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.8"
    android:thickness="10dp"
    android:useLevel="false">
    <solid android:color="#CCC" />

</shape>

<强> 2。 circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.8"
        android:shape="ring"
        android:thickness="10dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#e2d631"
            android:startColor="#dcdc38"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

现在在你的layout.xml中,即res&gt;布局&gt; (你的布局文件)

                  <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    >

                    <ProgressBar
                        android:id="@+id/pb_syllabus"
                        style="?android:attr/progressBarStyleHorizontal"
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:layout_centerInParent="true"
                        android:background="@drawable/circle_shape"
                        android:progress="60"
                        android:progressDrawable="@drawable/circular_progress_bar" />

                    <TextView
                        android:layout_width="40dp"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:gravity="center"
                        android:text="60%"
                        android:textColor="#ffffff"
                        android:textSize="21sp"
                        android:textStyle="bold" />
                </RelativeLayout>