Android开发UI设计问题解决方法

2021-10-14    分类: 网站建设

安卓开发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("你点击了按钮!");
}
}); //监听事件
运行代码,点击按钮,将会出现”你点击了按钮!”的文本提示。

当前题目:Android开发UI设计问题解决方法
文章分享:https://www.cdcxhl.com/news24/131174.html

成都网站建设公司_创新互联,为您提供网页设计公司网站排名定制开发网站内链网站收录软件开发

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

h5响应式网站建设