UI相关代码

Posted on | In

颜色渐变

  • drawable下创建

bg_btn.xml

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <!--圆角角度-->
    <corners android:radius="2dp"/>
    <!--渐变开始、中间、结束的颜色，也可以只写开始和结束-->
    <gradient android:startColor="@color/main_color"
        android:centerColor="@color/main_color2"
        android:endColor="@color/main_color3"/>
</shape>

可用在android:background

控件加阴影

  • shadow_layout.xml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <?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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/gray"
        android:gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="280dp"
            android:layout_height="140dp"
            android:background="@drawable/shadow_shape"
            android:gravity="center">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Linearlayout阴影， 5.0以下 layer-list图层"
                android:textSize="22sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="280dp"
            android:layout_height="140dp"
            android:layout_marginTop="20dp"
            android:background="@drawable/ll_shadow_shape"
            android:elevation="5dp"
            android:gravity="center">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Linearlayout阴影， 5.0以上 shape+elevation"
                android:textSize="22sp" />
        </LinearLayout>

        <android.support.v7.widget.CardView
            android:layout_width="280dp"
            android:layout_height="140dp"
            android:layout_marginTop="20dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="10dp"
            app:cardElevation="5dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="CardView阴影， 5.0以上 cardXxxx圆角阴影"
                android:textSize="22sp" />
        </android.support.v7.widget.CardView>
    </LinearLayout>

    • 其中 shadow_shape.xml

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      <?xml version="1.0" encoding="utf-8"?>
      <selector xmlns:android="http://schemas.android.com/apk/res/android">
          <!--按压状态下，前景变暗-->
          <item android:state_pressed="true">
              <layer-list>
                  <item android:left="4dp" android:top="4dp">
                      <shape>
                          <solid android:color="#F0F0F0" />
                          <corners android:radius="10dip" />
                      </shape>
                  </item>
              </layer-list>
          </item>
          <!--非按压状态下-->
          <item>
              <layer-list>
                  <!-- 999渐变隐形外层 -->
                  <item
                        android:left="0dp"
                        android:top="0dp">
                      <shape>
                          <solid android:color="#999999" />
                          <corners android:radius="10dp" />
                      </shape>
                  </item>
                  <!-- 777渐变阴影中层 -->
                  <item
                        android:left="0dp"
                        android:top="0dp"
                        android:bottom="2dp"
                        android:right="1dp">
                      <shape>
                          <solid android:color="#777777" />
                          <corners android:radius="10dp" />
                      </shape>
                  </item>
                  <!-- 555渐变阴影内层 -->
                  <item
                        android:left="0dp"
                        android:top="0dp"
                        android:bottom="3dp"
                        android:right="2dp">
                      <shape>
                          <solid android:color="#555555" />
                          <corners android:radius="10dp" />
                      </shape>
                  </item>
                  <!-- 白色前景 -->
                  <item
                        android:left="0dp"
                        android:top="0dp"
                        android:bottom="4dp"
                        android:right="3dp">
                      <shape>
                          <!--<gradient-->
                          <!--android:angle="270"-->
                          <!--android:endColor="#666666"-->
                          <!--android:startColor="#ffffff"-->
                          <!--/>-->
                          <solid android:color="#FFFFFF" />
                          <corners android:radius="10dp" />
                      </shape>
                  </item>
              </layer-list>
          </item>
      </selector>

    • 其中ll_shadow_shape.xml

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android"
          android:shape="rectangle" >

          <!-- 设置圆角弹出框矩形  -->
          <corners android:radius="5dip" />
          <!-- 边框颜色 -->
          <stroke
              android:width="0.5dip"
              android:color="#dddddd" />
          <!-- 背景填充色 -->
          <solid android:color="#fff" />

      </shape>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--阴影位置在头部-->
    <item android:gravity="top">

        <shape>
            <!--阴影高度-->
            <size android:height="3dp" />
            <padding android:top="3dp" />
            <!--angle表示方向角度。angle=0时，渐变色是从左向右。 然后逆时针方向转，当angle=90时为从下往上。angle=-90即从上往下-->
            <gradient
                android:angle="90"
                android:endColor="#fbfcfc"
                android:startColor="#E0E0E0" />
        </shape>
    </item>

</layer-list>

shape是用来定义形状的

gradient – 定义该形状里面为渐变色填充。 startColor起始颜色，endColor结束颜色。 android:angle 是指从哪个角度开始变，angle=0时，渐变色是从左向右。 然后逆时针方向转，当angle=90时为从下往上。angle=-90即从上往下。

solid – 填充。

stroke – 描边。

corners – 圆角。

padding – 定义内容离边界的距离。 与android:padding_left、android:padding_right这些是一个道理。

使用cardView记得在build.gradle中添加

1
2
compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:cardview-v7:23.1.1'
1
2
//androidx cardview
api androidx.cardview:cardview:1.0.0

控件加阴影（shape_shadow_corner_12_dp5）

shape_shadow_corner_12_dp5.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?xml version="1.0" encoding="utf-8"?>
<!--这个控件可看成一张图，用于控件背景使用。这张图特殊之处在于一层层的外沿颜色是渐变的（假装是阴影）如果想要显示全这个渐变的颜色那么控件的内部子控件的大小得比这个控件小（即给当前控件添加不小于5的padding，否则渐变效果会被遮盖住一部分。如果当前控件没有重写padding那么默认拥有padding=5dp的效果）-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="12dp" />
            <padding
                android:bottom="1.5dp"
                android:left="1.5dp"
                android:right="1.5dp"
                android:top="1.5dp" />
            <gradient
                android:angle="90"
                android:endColor="#01000000"
                android:startColor="#01000000"
                android:type="linear"
                android:useLevel="true" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="12dp" />
            <padding
                android:bottom="1.5dp"
                android:left="1.5dp"
                android:right="1.5dp"
                android:top="1.5dp" />
            <gradient
                android:angle="90"
                android:endColor="#02000000"
                android:startColor="#02000000"
                android:type="linear"
                android:useLevel="true" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="12dp" />
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <gradient
                android:angle="90"
                android:endColor="#03000000"
                android:startColor="#03000000"
                android:type="linear"
                android:useLevel="true" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="12dp" />
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
</layer-list>

使用：给需要阴影的控件添加android:background="@drawable/shape_shadow_corner_12_dp5"

android xml 设置半透明

android:background=”#26E6E8E7”

半透明颜色 前2位是透明度，后6位是颜色。
不透明 100% FF
95% F2
90% E6
85% D9
80% CC
75% BF
70% B3
65% A6
60% 99
55% 8C
半透明 50% 80
45% 73
40% 66
35% 59
30% 4D
25% 40
20% 33
15% 26
10% 1A
5% 0D
全透明 0% 00

举例：这是灰色

1
2
#E6E8E7  
1

半透明#26E6E8E7

将layout转成图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 //将布局转化成view对象
View viewBitmap = LayoutInflater.from(this).inflate(R.layout.view_haibao_job_detail, null);
WindowManager manager = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
manager.getDefaultDisplay().getMetrics(outMetrics);
int width = outMetrics.widthPixels;
int height = outMetrics.heightPixels;

//实例化数据（一系列的 viewBitmap.findViewById(rid) ）
findView(viewBitmap);
//对各个view设置数据
//...


//然后View和其内部的子View都具有了实际大小，也就是完成了布局，相当与添加到了界面上。接着就可以创建位图并在上面绘制了：
// 整个View的大小 参数是左上角 和右下角的坐标
viewBitmap.layout(0, 0, width, height);
int measuredWidth = View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY);
int measuredHeight = View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.AT_MOST);

viewBitmap.measure(measuredWidth, measuredHeight);
viewBitmap.layout(0, 0, viewBitmap.getMeasuredWidth(), viewBitmap.getMeasuredHeight());

//将view转成Bitmap
Bitmap finalBitmap = BitmapUtils.view2Bitmap(viewBitmap);
//对bitmap做其他操作
//...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//BitmapUtils.java

 /**
  * @param view 视图
  * @return bitmap
  */
public static Bitmap view2Bitmap(View view) {
    if (view == null) {
        return null;
    }
    int width = view.getWidth();
    int height = view.getHeight();

    Bitmap ret = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(ret);
    DebugLog.log("--------" + ret.getWidth());
    Drawable bgDrawable = view.getBackground();
    if (bgDrawable != null) {
        bgDrawable.draw(canvas);
    } else {
        canvas.drawColor(Color.WHITE);
    }
    view.draw(canvas);
    return ret;
}

黑白屏

1
2
3
4
5
Paint paint =  new Paint();
ColorMatrix cm = new ColorMatrix();
cm.setSaturation(0);
paint.setColorFilter(new ColorMatrixColorFilter(cm));
getWindow().getDecorView().setLayerType(View.LAYER_TYPE_HARDWARE, paint);

添加这几句就可以更改了（桌面图标的要另外更改）