Android模仿超级课表，展示多门课程重叠，页面有折角背景

跟UI搞了很久，用.9方式展示，还是做不成那个感觉，最后用Android的shape编写这个页面，没有自定义控件。

 

 先来看看这个效果图

 

 

 

 

 有折角的页面的代码  shape 文件命名为 ：bgll.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/color_bg1" >
    <shape android:shape="rectangle" >
        <corners android:radius="5.5dp"/>
        <solid android:color="#FD9193" />
    </shape>
    </item>

    <item >
        <shape  android:shape="rectangle" >
            <corners android:radius="5.5dp"/>
            <solid android:color="#30000000" />
        </shape>
    </item>

    <item  android:bottom="2dp" >
    <shape android:shape="rectangle" >
        <corners android:radius="5.5dp"/>
        <solid android:color="#bbffffff" />
    </shape>

</item>
    <item android:id="@+id/color_bg2" android:bottom="2dp" android:right="5.5dp">
        <shape android:shape="rectangle">
            <corners android:radius="5.5dp"/>
            <solid android:color="#FD9193" />
        </shape>
    </item>
    <item android:id="@+id/color_bg3" android:bottom="7dp" >
        <shape android:shape="rectangle">
            <corners
                android:bottomLeftRadius="5.5dp"
                android:bottomRightRadius="3dp"
                android:topLeftRadius="5.5dp"
                android:topRightRadius="5.5dp" />
            <solid android:color="#FD9193" />
        </shape>
    </item>

</layer-list>

 

这段代码的效果图：

 

为了动态改变背景，在需要改变颜色的item里加了id。

 

在代码里使用案例:

textView.setBackgroundResource(R.drawable.bgll);
setbg("#"+colors_back[subject.getColorRandom()],textView);

private void setbg(String color,TextView view){
    LayerDrawable layerDrawable = (LayerDrawable) view.getBackground();
    GradientDrawable bg1 = (GradientDrawable) layerDrawable.findDrawableByLayerId(R.id.color_bg1);
    GradientDrawable bg2 = (GradientDrawable) layerDrawable.findDrawableByLayerId(R.id.color_bg2);
    GradientDrawable bg3 = (GradientDrawable) layerDrawable.findDrawableByLayerId(R.id.color_bg3);
    bg1.setColor(Color.parseColor(color));
    bg2.setColor(Color.parseColor(color));
    bg3.setColor(Color.parseColor(color));
}

这个折页控件底部还有一个阴影的控件，也是shape绘制： 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/color_line">
        <shape android:shape="rectangle">
            <corners android:radius="7dp" />
               
            <gradient
                android:angle="-90"
                android:endColor="#20FD9193"
                android:startColor="#c1FD9193" /><!-- 90阴影冲上，－90，阴影冲下-->
        </shape>
    </item>
</layer-list>

最后组件起来使用：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_course_item_framelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/id_course_item_count"
        android:layout_width="match_parent"
        android:layout_height="17dp"
        android:layout_gravity="bottom"
        android:background="@drawable/shape_line1"
        android:gravity="center"
        />
    <TextView
        android:id="@+id/id_course_item_course"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="3.9dp"
        android:layout_marginHorizontal="0.2dp"
        android:background="@drawable/bgll"
        android:gravity="left"
        android:padding="2.5dp"
        android:textColor="@color/app_white"
        android:textSize="12sp" />


</FrameLayout>

最后的代码：

TextView textView = (TextView) view.findViewById(R.id.id_course_item_course);
TextView countTextView = (TextView) view.findViewById(R.id.id_course_item_count);

textView.setBackgroundResource(R.drawable.bgll);
setbg(color,textView);
setbgm(colors,countTextView);

private void setbg(String color,TextView view){
    LayerDrawable layerDrawable = (LayerDrawable) view.getBackground();
    GradientDrawable bg1 = (GradientDrawable) layerDrawable.findDrawableByLayerId(R.id.color_bg1);
    GradientDrawable bg2 = (GradientDrawable) layerDrawable.findDrawableByLayerId(R.id.color_bg2);
    GradientDrawable bg3 = (GradientDrawable) layerDrawable.findDrawableByLayerId(R.id.color_bg3);
    bg1.setColor(Color.parseColor(color));
    bg2.setColor(Color.parseColor(color));
    bg3.setColor(Color.parseColor(color));
}
private void setbgm( int[] colors,TextView view1){
    GradientDrawable gradientDrawable = new GradientDrawable(
            GradientDrawable.Orientation.TOP_BOTTOM, colors);
    gradientDrawable.setCornerRadius(23);
    view1.setBackground(gradientDrawable);
}

 

注意一点函数 setbgm（） 里的 GradientDrawable  务必要new，不然会复用性，出现统一的阴影。原本我是这么写的：

LayerDrawable layerDrawable1 = (LayerDrawable) view1.getBackground();
 GradientDrawable line= (GradientDrawable) layerDrawable1.findDrawableByLayerId(R.id.color_line);
 line.setColors(colors);

这段代码不行，出现控件复用性。按照我那样写不出现问题。