Android studio界面ui优化

已于 2023-04-14 17:00:42 修改
阅读量2.3k 收藏 37
点赞数 3
文章标签： android studio ui android
于 2023-04-04 23:15:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzzzzwbetter/article/details/129954783
版权

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

目录

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>

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

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

2、美化按钮

  • 背景透明并取消阴影
    效果图：
    在这里插入图片描述

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

  • 点击按钮变色
    效果图
    在这里插入图片描述
    同样创建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>

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

                activity.setBackground(null);
                goods.setBackground(null);
                feedback.setBackground(getResources().getDrawable(R.drawable.button_shape));
  • 虚线框
    效果图：
    在这里插入图片描述
<?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>
  • 预留位置

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>

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

 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);
                }
                }

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（个人觉得最方便）
zzzzzwbetter
关注
  • 3
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
让我们一起来做最漂亮的Android界面吧！
02-03
：如何为Android设备量身定制以打造出最为完美的应用？这是让诸多开发者很是头疼的问题。不同于iOS，Android设备品类众多，屏幕分辨率、动态缩放、字体等各有不同。美国自学成才的UI/UX设计师MengTo结合自己所学及实战演练对Android应用设计进行了各方位的深入剖析。与苹果的iOS家族相比，Android家族显然要大得多，但俗语有言“林子大了什么鸟都有”，Android设备品类繁多，界面不甚协调，再加上其一贯的自由开放作风，直接导致了应用极度缺乏统一性。Android自身的开放性极大的推动了应用的自主性，但对于开发者而言，在应用开发过程中，大到界面设计，小到屏幕分辨率、动态缩放及
android 漂亮的UI界面 完整的界面设计
02-17
声明：这也是我学习时在网上下载的，鉴于分享精神，并且觉得很不错才上传上来的。。。。。 android 漂亮的UI界面 完整的界面设计 这是一个完整的UI设计，但是没写动作，这是一个公司程序员的公司任务设计，请别商用，要用请修改。。。
Android studio （TableLayout 表格和边框颜色改变的方法）
2201_75440944的博客
03-13 546
随着智能手机的不断发展，Android studio学习这门技术也越来越重要，很多人都开启了学习Android的学习，本文就介绍了Android studio（TableLayout）的基础内容。本文简单介绍了TableLayout的使用，并且解决了边框不显的问题，希望对初学者有所帮助！
android界面UI美化：沉浸模式、全透明或半透明状态栏及导航栏的实现
热门推荐
Dovar_66的博客
09-28 1万+
android api19开始我们就能对顶部状态栏和底部导航栏进行半透明处理了，而api21开始则可以实现全透明状态栏与导航栏以及开启沉浸模式，至于什么是沉浸模式，大家百度一下应该就都知道了，有一点需要强调的是全透明不是沉浸模式，前者只是将状态栏、导航栏的背景设置为完全透明，而后者则是完全将状态栏与导航栏隐藏并且只要在屏幕顶部下滑或在底部上滑就能短暂呼出状态栏与导航栏当然几秒钟之后还是会隐藏的； ...
Android Studio Button 美化
weixin_42199142的博客
11-09 1万+
改变按钮Button控件的边角、填充颜色、边框颜色。 步骤： 在 res&amp;gt;drawable 中新建一个 btn_all_shape.xml ： &amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; &amp;lt;shape xmlns:android=&quot;http://schemas.android.com/apk/r
android ui界面设计的一些心得与问题解决
hehe307的专栏
03-02 1204
1.把Button或者ImageButton的背景设为透明或者半透明:     半透明     透明     其他透明度：在RGB的值前面加上数字（100以内），如#90436EEE（RGB为436EEE），#50436EEE，根据值的大小呈现不同的显示效果，值越小透明度越高。     2.设置按钮背景图片或颜色：     btn.setBackgroundResou
Android UI设计 按钮美化
08-25
Android UI设计 按钮美化
[Android] Android开发优化之——对界面UI的优化（2）
runfeel
01-30 124
在一个应用程序中，一般都会存在多个Activity，每个Activity对应着一个UI布局文件。一般来说，为了保持不同窗口之间的风格统一，在这些UI布局文件中，几乎肯定会用到很多相同的布局。如果我们在每个xml文件中都把相同的布局都重写一遍，一个是代码冗余，可读性很差；另一个是修改起来比较麻烦，对后期的修改和维护非常不利。所以，一般情况下，我们需要把相同布局的代码单独写成一个模块，然后在用到的时候...
Android Studio简单设置
Jerry Liu
12-17 1102
Android Studio 简单设置 界面设置 默认的 Android Studio 为灰色界面，可以选择使用炫酷的黑色界面。 Settings --> Appearance --> Theme ，选择 Darcula 主题即可。 字体设置 系统字体设置 如果你的Android Studio界面中，中文显示有问题，或者选择中文目录显示有问题，或者想
Android Studio插件美化Android Studio,文艺清新范
weixin_30412167的博客
12-03 210
一：重新定义你工作区的颜色 1:原生的工作区文字的颜色反人类，来这个网站下载自己喜欢的主题：http://www.riaway.com/ 轻松定义：下载后是个jar包。 2:导入jar包 　　 file -import Setting 3: 弹出对话框之后选ok 4:字体设置 取消复选框的√之后可以选择更多字体哦~ 自定义字体 二:改变工作区背景 1.下载插件...
Android Studio 美化
秋知叶i
01-08 2623
美好的事物总是令人向往的，毕竟窈窕淑女、君子好逑 版本 Android Studio 3.5.3 程序员也应当让自己的伙计变的动人 1.字体美化 这里我们借助第三方网站选择自己喜欢的字体 字体网站 ①.给老伙计选择一个喜欢的字体，比如我们喜欢这个，点击进去 ②.下载字体 ③.导入字体 进入设置 选择导入我们刚才下载的jar 勾上点击OK 导入成功，重启软件 完成字体设置 2.字体大小...
editText美化demo
06-15
对EditeText的美化,非常简单的实现浮动标签EditText:Android视图使用EditText之上,并提示EditText时填充文本。核心代码不超过50行
Android弹窗UI美化
12-07
漂亮的android弹窗，更改了很多布局，瞬间高大上。可以显示图片。
完美AndroidStudio代码配色方案，界面UI，收藏备用
01-24
File-ImportSettings导入即可。如未生效进入Appearance手动启用主题
android 官方ui 美化资源
03-10
android官方推出的界面美化资源请享用
安卓登陆界面ui源码 android studio
10-15
安卓清新简约登陆界面源码 （圆角处理）android studio版本2.2.2
Android studio界面设计与资源PPT
02-04
（2）熟悉Android的布局对象和Android中创建UI界面的方式 （3）熟悉Android常用的UI控件及其基本属性 （4）熟悉Android尺寸的单位 （5）掌握TextView、EditText、Button、DatePicker、TimePicker等常用控件的功能...
Android Studio简易通讯录界面.rar
11-20
1、获取手机通讯录的信息；2、手机通讯录的数据封装；3、手机通讯录的信息的UI适配；4、对ListView的优化。
android studio设计ui界面
最新发布
04-09
Android Studio是一款功能强大的集成开发环境（IDE），专门用于开发Android应用程序。它提供了丰富的工具和功能，使开发者能够轻松地设计和构建各种各样的UI界面。 下面是使用Android Studio设计UI界面的步骤[^1]： 1. 打开Android Studio并创建一个新的Android项目。 2. 在项目结构中，找到并打开“res”文件夹。 3. 在“res”文件夹中，找到并打开“layout”文件夹。 4. 在“layout”文件夹中，找到并打开“activity_main.xml”文件。 5. 在“activity_main.xml”文件中，使用Android Studio提供的可视化编辑器来设计UI界面。你可以通过拖拽和放置各种UI组件（如按钮、文本框、图像等）来创建你想要的界面布局。 6. 在编辑器中，你可以调整UI组件的大小、位置和样式，以满足你的需求。你还可以设置UI组件的属性，如文本内容、背景颜色、字体样式等。 7. 在设计完成后，你可以在编辑器中预览你的UI界面，以确保它符合你的预期。 8. 一旦你满意你的UI界面设计，你可以保存并关闭“activity_main.xml”文件。 9. 在Java代码中，你可以编写逻辑代码来处理用户交互和实现功能。你可以在“MainActivity.java”文件中找到并编辑这些代码。 10. 在完成代码编写后，你可以使用Android Studio提供的模拟器或连接真实设备来运行和测试你的应用程序。 通过上述步骤，你可以使用Android Studio设计一个简单而美观的UI界面，并为它添加交互和逻辑功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值