当前位置:   article > 正文

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

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(个人觉得最方便)
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/676340
推荐阅读
相关标签
  

闽ICP备14008679号