网站设计公司易捷网络:专注企业网站设计
您现在的位置:首页 > 网站设计资讯 > Android开发UI设计问题解决方法

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

来源:易捷网站设计公司     时间:2019-07-11

安卓开发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_
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark">
...
</RelativeLayout>
<!--中部和底部-->
<RelativeLayout
android:id="@+id/middle"
android:layout_weight="1"
android:layout_
android:layout_height="match_parent">
...
</RelativeLayout>
</LinearLayout>

2.分割线的实现
分割线的实现,方法比较粗暴,直接使用ImageView组件实现
给其src设置为一个颜色,然后修改其weight(对应分割线的宽度)以及height(对应分割线的高度)属性以及位置设置
<ImageView
android:id="@+id/horLine2"
android:layout_
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_
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_
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_
android:layout_height="wrap_content"/>
<Button
android:layout_
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文件进行界面设计
打开AndroidStudio,建立工程,在res/layout下存放的是界面布局文件。双击创建的文件,左边是界面设计,右边对应了界面设计的xml文本。
1>在左边控件中,拖动一个button到右边的手机界面中,之后点击上线画圈右边的text查看文本,可以看到xml已经编写完成。
2>切换到代码目录,打开之前创建的MainActivity,在onCreate()方法中:
setContentView(R.layout.activity_main);//将编写的界面显示到手机屏幕

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

onCreate()里面初始化tv和bt,并给bt添加监听事件
tv=(TextView)findViewById(R.id.textView);//控件初始化
bt=(Button)findViewById(R.id.button);//控件初始化
bt.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewv){
tv.setText("你点击了按钮!");
}
);//添加监听

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

activity_main.xml

<?xmlversion="1.0"encoding="utf-8"?>
<android.support.constraint.ConstraintLayoutxmlns: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_
android:layout_height="match_parent"
tools:context="com.example.yc.sysu.MainActivity">
<TextView
android:id="@+id/title"
android:layout_
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_
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_
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_
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_
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_
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_
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_
android:layout_height="wrap_content"/>
<RadioButton
android:id="@+id/radioButton2"
android:text="教职工"
android:textColor="#000000"
android:textSize="18sp"
android:layout_
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"/>
</RadioGroup>
<View
android:id="@+id/button_box"
android:layout_height="50dp"
android:layout_
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_
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_
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
<?xmlversion="1.0"encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"><solidandroid:color="#3f51b5"/><cornersandroid:radius="10dip"/><padding
android:bottom="5dp"
android:top="5dp"
android:left="10dp"
android:right="10dp"/></shape>
<?xmlversion="1.0"encoding="utf-8"?>
<shapexmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solidandroid:color="#3f51b5"/>
<cornersandroid:radius="10dip"/>
<padding
android:bottom="5dp"
android:top="5dp"
android:left="10dp"
android:right="10dp"/>
</shape>

二、通过代码进行界面设计
定义MainActivity的私有成员:
privateTextViewtv;
privateButtonbt;
重写onCreate(),通过new定义一个线性布局和Button按钮和文本框控件,布局里面加入控件,控件加上监听事件
LinearLayoutl=newLinearLayout(this);//定义线性布局
setContentView(l);//线性布局加入屏幕
tv=newTextView(this);//定义控件
bt=newButton(this);//定义控件
l.addView(bt);//加入布局
l.addView(tv);//加入布局
bt.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewv){
tv.setText("你点击了按钮!");
}
});//监听事件
运行代码,点击按钮,将会出现”你点击了按钮!”的文本提示。

东莞富腾电机网站首页设计效果图-易捷网站设计
东莞富腾电机网站首页设计效果图
返回上一级
您可能需要:
网站设计图标
企业网站设计
高速稳定的国内空间,免费备案的香港、国外空间,单线、双线以多线空间
点击咨询
关键字推广优化图标
网站推广优化
指定网站关键词,确保一月之内优化到搜索引擎得首页,到首页之后再收费
点击咨询
企业邮箱图标
企业邮箱申请购买
以企业官网后缀为名称的邮箱,彰显公司企业形象,先试用,满意后再付款
点击咨询
国徽图标
网站域名空间备案
域名空间提交国家工信部备案审核,十五天即可完成,网站备案实名势在必行
点击咨询
网站设计最新案例赏析
网站设计相关资讯推荐
深圳市易捷网络科技有限公司版权所有