您需要AI互联网
顾问提供专业咨询
AI人工智能 · VR · AR · 智慧博物馆 · 智慧公园 · 景区 · 文创 · 动画 · 游戏 · 年度运营
大模型定制 · WEB3 · 元宇宙 · 区块链 · 高端网站建设 · 小程序 · APP · 微信 · H5 · 电商
Android开发UI设计问题解决方法
2019.04.25

 安卓开发UI设计的问题以及解决方法

1. 页面部分占用1/N的情况

   解决方案;
            使用线性布局,其属性android:orientation="vertical",android:weightSum="3"
            线性布局里面有两个相对布局,分别设置两个相对布局的layout_weight

            关于其中的权重比为2:1,参阅Android布局中的layout_weight和weightSum属性的详解及使用



           

 <LinearLayout 

                android:orientation="vertical"
                ...
                android:weightSum="3">
                <!-- 上部  -->
                <RelativeLayout
                    android:layout_weight="2"
                    android:id="@+id/top"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/colorPrimaryDark">

                    ...

                </RelativeLayout>

                <!-- 中部和底部  -->
                <RelativeLayout
                    android:id="@+id/middle"
                    android:layout_weight="1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    ...

                </RelativeLayout>
            </LinearLayout>
             

2. 分割线的实现

    分割线的实现,方法比较粗暴,直接使用ImageView组件实现
    给其src设置为一个颜色,然后修改其weight(对应分割线的宽度)以及height(对应分割线的高度)属性以及位置设置

     <ImageView
           android:id="@+id/horLine2"
           android:layout_width="match_parent"
           android:layout_height="15dp"
           android:layout_below="@+id/info"
           android:layout_marginTop="15dp"
           android:src="#1E000000"/>
    

3. 多个组件高度一致,顶对齐,并且水平均匀分布

    例子:需要实现下图的情况,需要三个button高度一致,顶对齐并且水平均匀分布
    在这里插入图片描述
    首先需要了解一下约束布局以其使用
        约束布局(ConstraintLayout),布局内组件按各种约束排列。每个组件受到三类约束,即其他组件,父容器(parent),基准线(GuideLine)。 约束布局代码可归纳为以下形式:app:layout_constraint[组件本身的位置]_to[目标位置]Of="[目标id]"。因此若想要组件水平居中,只需设置组件的左右边界与父容器的左右边界分别对齐。同理,组件的垂直居中也可以这么设置。
    再思考本问题,是否也能使用约束布局来完成呢?使用约束布局,将三个按钮放在一个约束布局里面,每个按钮视图的左侧或者右侧与需要的对齐按钮的相应侧对齐即可,则组件之间就可以处于均匀分布了。

     <android.support.constraint.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
         <Button
             app:layout_constraintRight_toLeftOf="@+id/loadBtn"
             app:layout_constraintLeft_toLeftOf="parent"
             android:id="@+id/saveBtn"
             android:text="SAVE"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />

         <Button
             android:id="@+id/loadBtn"
             android:text="LOAD"
             app:layout_constraintLeft_toRightOf="@+id/saveBtn"
             app:layout_constraintRight_toLeftOf="@+id/clearBtn"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content" />

         <Button
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             app:layout_constraintLeft_toRightOf="@+id/loadBtn"
             app:layout_constraintRight_toRightOf="parent"
             android:id="@+id/clearBtn"
             android:text="CLEAR"/>

     </android.support.constraint.ConstraintLayout>


安卓UI界面设计的方式;

用户界面在程序开发中十分重要,一个好的用户界面设计需要考虑到用户使用体验、是否美观方便等。在界面设计的过程中,需要考虑如何制作出UI界面,怎么样控制UI界面两大块。

本文主要介绍通过两种方式来进行界面设计:
1、通过xml文件进行界面设计
2、通过代码控制进行界面设计

一、通过xml文件进行界面设计
打开Android Studio,建立工程,在res/layout下存放的是界面布局文件。双击创建的文件,左边是界面设计,右边对应了界面设计的xml文本。
1>在左边控件中,拖动一个button到右边的手机界面中,之后点击上线画圈右边的text查看文本,可以看到xml已经编写完成。
2>切换到代码目录,打开之前创建的MainActivity,在onCreate()方法中:

setContentView(R.layout.activity_main);  //将编写的界面显示到手机屏幕

    
MainActivity添加两个私有数据成员:

private TextView tv;
private Button bt;

    
onCreate()里面初始化tv和bt,并给bt添加监听事件

tv = (TextView)findViewById(R.id.textView);//控件初始化
bt = (Button) findViewById(R.id.button);//控件初始化

bt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tv.setText("你点击了按钮!");
}
);//添加监听


运行程序,点击按钮,原来的hello world!文本发生改变。在这里,两个控件都是通过xml文件定义的,我们在代码中实现了一个监听器,也就是界面的控制逻辑。
实例:
通过代码进行界面设计时,我们建立一个TextView控件来写标题;建立一个ImageView控件来写标题。先将图片复制到res/drawable目录下,然后通过app:srcCompat=”@drawable/sysu”来引用;建立两个TextView控件,用来写“学号”和“密码”,设置建立两个EditView控件,用来输入学号和密码;建立一个RadioGroup,之后再在里面建立两个单选按钮RadioButton。

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.yc.sysu.MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="学生信息系统"
        android:textSize="20sp"
        android:textColor="#000000"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <ImageView
        android:id="@+id/icon"
        android:layout_width="104dp"
        android:layout_height="104dp"
        app:srcCompat="@drawable/sysu"
        app:layout_constraintTop_toBottomOf="@id/title"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/user_id"
        android:text="学号:"
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="20dp"
        app:layout_constraintTop_toBottomOf="@id/icon"
        android:layout_marginTop="20dp" />

    <TextView
        android:id="@+id/user_pwd"
        android:text="密码:"
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="20dp"
        app:layout_constraintTop_toBottomOf="@id/user_id"
        android:layout_marginTop="20dp"/>

    <EditText
        android:id="@+id/text_userid"
        android:hint="请输入学号"
        android:textColor="#000000"
        android:textSize="18sp"
        android:paddingTop="0dp"
        android:digits="0123456789"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/user_id"
        app:layout_constraintLeft_toRightOf="@+id/user_id"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="20dp"/>

    <EditText
        android:id="@+id/text_userpwd"
        android:hint="请输入密码"
        android:textColor="#000000"
        android:textSize="18sp"
        android:password="true"
        android:paddingTop="0dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/user_pwd"
        app:layout_constraintLeft_toRightOf="@+id/user_pwd"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="20dp" />

    <RadioGroup
        android:id="@+id/radioButton"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/user_pwd"
        android:layout_marginTop="30dp">

    <RadioButton
        android:id="@+id/radioButton1"
        android:text="学生"
        android:textColor="#000000"
        android:textSize="18sp"
        android:checked="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <RadioButton
        android:id="@+id/radioButton2"
        android:text="教职工"
        android:textColor="#000000"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"/>
    </RadioGroup>

    <View
        android:id="@+id/button_box"
        android:layout_height="50dp"
        android:layout_width="185dp"
        app:layout_constraintTop_toBottomOf="@id/radioButton"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <Button
        android:id="@+id/button1"
        android:text="登录"
        android:textColor="#ffffff"
        android:background="@drawable/shape"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="@id/button_box"
        app:layout_constraintTop_toTopOf="@id/button_box" />

    <Button
        android:id="@+id/button2"
        android:text="注册"
        android:textColor="#ffffff"
        android:background="@drawable/shape"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/button1"
        android:layout_marginLeft="10dp"
        app:layout_constraintTop_toTopOf="@id/button_box"/>

</android.support.constraint.ConstraintLayout>



shape.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"> <solid android:color="#3f51b5"/> <corners android:radius="10dip"/> <padding
        android:bottom="5dp"
        android:top="5dp"
        android:left="10dp"
        android:right="10dp"/> </shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#3f51b5"/>
    <corners android:radius="10dip"/>
    <padding
        android:bottom="5dp"
        android:top="5dp"
        android:left="10dp"
        android:right="10dp"/>
</shape>


二、通过代码进行界面设计
定义MainActivity的私有成员:

    private TextView tv;
    private Button bt;

重写onCreate(),通过new定义一个线性布局和Button按钮和文本框控件,布局里面加入控件,控件加上监听事件

LinearLayout l = new LinearLayout(this);  //定义线性布局
        setContentView(l);                //线性布局加入屏幕

        tv = new TextView(this);          //定义控件
        bt = new Button(this);            //定义控件

        l.addView(bt);                   //加入布局
        l.addView(tv);                  //加入布局

        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tv.setText("你点击了按钮!");
            }
        });         //监听事件

运行代码,点击按钮,将会出现”你点击了按钮!”的文本提示。


400-6446-365 / 010-64928252 我想要个更针对我需求的方案