Android studio界面ui优化_android 系统设置界面ui csdn

记录一下对毕设界面的优化

1、美化TableRow，实现下边框

效果图：

方法：创建xml文件，然后引用该xml文件：

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

    <item>
        <shape>
<!--            边框颜色-->
            <solid android:color="#ebebeb" />
        </shape>
    </item>

    <item
        android:bottom="2dp">  //有四个方向可以选择，这里选择底部
        <shape>
<!--            背景颜色-->
            <solid android:color="@color/lightgreen" />
        </shape>
    </item>

</layer-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

有时候下边框可以直接用view实现，我是因为不想把tablelayout改成linearlayout所以没用这个方法
view方法：

  <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/lightgreen" />
1
2
3
4

2、美化按钮

• 背景透明并取消阴影
  效果图：
  

           android:backgroundTint="#0000"
           android:stateListAnimator="@null"
  1
  2

• 点击按钮变色
  效果图
  
  同样创建xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--    设置按钮圆角按钮的步骤-->
    <!--    1.设置圆角的半径-->
    <!--    2.设置按钮的颜色-->
    <!--    3.设置边框大粗细和颜色-->
    <corners android:radius="10dp"/>
    <solid android:color="@color/lightgreen"/>
    <stroke android:width="1dp"
        android:color="@color/lightgreen"/>
</shape>
1
2
3
4
5
6
7
8
9
10
11

然后在代码块中设置点击时显示该格式，未点击时格式为空

                activity.setBackground(null);
                goods.setBackground(null);
                feedback.setBackground(getResources().getDrawable(R.drawable.button_shape));
1
2
3

• 虚线框
  效果图：
  

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp"/>
    <!--        dashGap和dashWidth一起作用产生虚线效果-->
    <stroke
        android:dashGap="20dp"
        android:dashWidth="20dp"
        android:width="1dp"
        android:color="@color/iconColor"/>
</shape>
1
2
3
4
5
6
7
8
9
10

• 预留位置

3、更改icon颜色

效果图：
更改前：
更改后：
方法：在xml文件里使用app:tint="@color/alarmColor"即可

4、实现头像位于卡片中间

效果图：

思路：使用relativeLayout布局，使头像位于卡片的下方，然后通过 android:layout_marginTop="-50dp"调整位置

问题：会发现Imagview会被卡片挡住，而不能显示在卡片的上面

解决办法：cardview引用 android:elevation="10dp"，头像设为 android:elevation="20dp"，即头像的值比cardview大就行

ps:要把不必要的嵌套布局都删掉，同时卡片的值最好不要设为0，我设成0的时候即使头像的值比0大也不起作用

5、弹窗的美化

效果图：

ps:先创建一个xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_gravity="center"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="20dp">

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

    <androidx.cardview.widget.CardView
        android:id="@+id/card1"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:backgroundTint="@color/mainBackground"
        android:layout_height="wrap_content"
        app:cardCornerRadius="10dp">

        <LinearLayout
            android:id="@+id/lay"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_createQRCode"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:textSize="18dp"
                android:textColor="@color/textColor"
                android:text="生成签到码" />
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/lightgreen" />

            <TextView
                android:id="@+id/tv_signInForm"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:textSize="18dp"
                android:textColor="@color/textColor"
                android:text="下载报名表" />
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/lightgreen" />

            <TextView
                android:id="@+id/tv_entryForm"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:textSize="18dp"
                android:textColor="@color/textColor"
                android:text="下载签到表" />
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/lightgreen" />

            <TextView
                android:id="@+id/tv_delete"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:textSize="18dp"
                android:textColor="#E36B6B"
                android:text="删除活动" />
            
        </LinearLayout>

    </androidx.cardview.widget.CardView>

        <LinearLayout
            android:layout_below="@+id/card1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        <ImageView
            android:layout_marginTop="10dp"
            android:id="@+id/imageView6"
            android:layout_gravity="center_horizontal"
            app:tint="@color/lightgreen"
            android:layout_width="30dp"
            android:layout_height="30dp"
            app:srcCompat="@drawable/delete_pic" />

        </LinearLayout>

    </RelativeLayout>

</LinearLayout>
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

然后在代码块处实现点击图标出现弹窗：

 menu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //创建弹窗
                builder = new AlertDialog.Builder(ActivityDetailActivity.this);
                inflater = getLayoutInflater();
                layout = inflater.inflate(R.layout.dialog_menu, null);//获取自定义布局
                builder.setView(layout);//设置对话框的布局
                dialog = builder.create();//生成最终的对话框
                dialog.show();//显示对话框

                //弹窗背景透明
                dialog.setCanceledOnTouchOutside(true);
                Window window = dialog.getWindow();
                window.setContentView(R.layout.dialog_menu);
                ((Window) window).setBackgroundDrawable(new ColorDrawable(0x00000000));
                WindowManager windowManager = ActivityDetailActivity.this.getWindowManager();
                Display display = windowManager.getDefaultDisplay();
                WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
                lp.height = WindowManager.LayoutParams.MATCH_PARENT; //设置宽度
                lp.width = WindowManager.LayoutParams.MATCH_PARENT; //设置宽度
//                lp.gravity = Gravity.BOTTOM;
                window.setGravity(Gravity.CENTER);
                dialog.getWindow().setAttributes(lp);
                }
                }
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

ps:但其实这一块的代码我是想实现弹窗位于最低端来着，但是不知道为什么Gravity.Bottom不起作用，后来是在xml的文件里更改弹窗的位置才实现位置的变化，不过误打误撞实现了背景透明

pps:如果弹窗位置始终不变化，试着查看xml的宽和高是不是match_parent，不是的话可能会导致弹窗的位置不改变。

pps:如果 dialog.setCanceledOnTouchOutside(true)不起作用，可以试着修改宽和高，（我发现直接不设置宽和高倒也行）参考文章：安卓Dialog setCanceledOnTouchOutside(ture) 无效问题

ppps:我发现有的时候这样设置之后弹窗点击失效，这时候只用把 window.setContentView(R.layout.dialog_menu);注释掉就好

6、editText美化

去除editText的下划线：
两种方法，一种是令background为@null，第二种方法：令background为00FFFFFF。

7、卡片的使用

• 添加阴影： app:cardElevation="@dimen/fab_margin"

经验总结：

• 如果涉及到很多控件的大小、颜色，尽量采用引用的方式，即用@color/viewColor的方式，而不是直接#FFFFFF，因为这样后期修改比较方便，不用一个一个地修改
• 布局最好用relativelayout（个人觉得最方便）