觉得有帮助或运行有问题请点赞关注收藏后评论区留言
设置视图的宽高
手机屏幕是快长方形区域,较短的为宽,较长的为边,App控件也通常是长方形状,控件宽度通过android:layout_width表达,控件高度通过android:layout_height表达 宽高的取值主要有以下三种
1:match_parent 表示与上级视图保持一直 上级视图尺寸多大,它就多大
2:wrap_content 表示与内容自适应,对于文本视图来说,内部文字需要多大的空间,当前视图就要占据多大的尺寸
3:以dp为单位的具体尺寸
在XML文件中采用以上任一方式均可设置视图的宽高,但在Java代码中设置宽高就有点复杂,首先确保XML文件中的宽高属性值为wrap_content,这样才允许在代码中修改宽高 在Java中依次执行以下三个步骤
1:调用控件对象的getLayoutParams方法 获取该控件的布局参数
2:修改布局参数的width和height参数
3:调用控件对象的setLayoutParams方法 填入修改后的布局参数使之生效
下面通过一个实例讲解 效果如下
ViewBorderActivity类代码如下
package com.example.chapter03; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.ViewGroup; import android.widget.TextView; import com.example.chapter03.util.Utils; public class ViewBorderActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_border); // 获取名叫tv_code的文本视图 TextView tv_code = findViewById(R.id.tv_code); // 获取tv_code的布局参数(含宽度和高度) ViewGroup.LayoutParams params = tv_code.getLayoutParams(); // 修改布局参数中的宽度数值,注意默认px单位,需要把dp数值转成px数值 params.width = Utils.dip2px(this, 300); tv_code.setLayoutParams(params); // 设置tv_code的布局参数 } }
activity_view_borderXML文件代码如下
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:background="#00ffff" android:text="视图宽度采用wrap_content定义" android:textColor="#000000" android:textSize="17sp" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:background="#00ffff" android:text="视图宽度采用match_parent定义" android:textColor="#000000" android:textSize="17sp" /> <TextView android:layout_width="300dp" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:background="#00ffff" android:text="视图宽度采用固定大小" android:textColor="#000000" android:textSize="17sp" /> <TextView android:id="@+id/tv_code" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:background="#00ffff" android:text="通过代码指定视图宽度" android:textColor="#000000" android:textSize="17sp" /> <TextView android:id="@+id/tv_hello" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello"/> </LinearLayout>
设置视图的间距
android:layout_margin用于设置视图的间距,它们通通由视图基类View派生而来,而layout_margin正是View的一个通用属性。
下面通过一个实例讲解 效果如下
可以看出视图里面有嵌套,第一个是蓝色里面嵌套黄色,第二个是黄色里面嵌套红色
layout_margin指的是当前图层与外部图层的距离,而padding指的是当前图层与内部图层的距离
ViewMarginActivity类代码如下
package com.example.chapter03; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; public class ViewMarginActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_margin); } }
activity_view_marginXML文件代码如下
<!-- 最外层的布局背景为蓝色 --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="300dp" android:background="#00aaff" android:orientation="vertical"> <!-- 中间层的布局背景为黄色 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="20dp" android:background="#ffff99" android:padding="60dp"> <!-- 最内层的视图背景为红色 --> <View android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff0000" /> </LinearLayout> </LinearLayout>
设置视图的对齐方式
App界面上的视图排列,默认靠左朝上对齐,这也符合日常的书写格式,然而页面的排版不是一成不变的,所以通过属性android:layout_gravity可以指定当前视图的对齐方向
当属性值为top|left的时候意味着既朝上又靠左,其他以此类推即可
下面通过一个实例讲解 效果如下
可以看出第一个子布局朝下,并且它的内部视图靠左,而第二个子布局朝上,并且它的内部视图靠右,对比XML文件中的layout_gravity和gravity可以得出以下结论
layout_gravity决定当前视图位于上级视图的哪个方位
gravity决定了下级视图位于当前视图的哪个方位
ViewGravityActivity类代码如下
package com.example.chapter03; import android.os.Bundle; import androidx.appcompat.app.AppCompatActivity; public class ViewGravityActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_view_gravity); } }
activity_view_gravityXML文件代码如下
<!-- 最外层的布局背景为橙色,它的下级视图在水平方向排列 --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="300dp" android:background="#ffff99" android:padding="5dp"> <!-- 第一个子布局背景为红色,它在上级视图中朝下对齐,它的下级视图则靠左对齐 --> <LinearLayout android:layout_width="0dp" android:layout_height="200dp" android:layout_weight="1" android:layout_gravity="bottom" android:gravity="left" android:background="#ff0000" android:layout_margin="10dp" android:padding="10dp"> <!-- 内部视图的宽度和高度都是100dp,且背景色为青色 --> <View android:layout_width="100dp" android:layout_height="100dp" android:background="#00ffff" /> </LinearLayout> <!-- 第二个子布局背景为红色,它在上级视图中朝上对齐,它的下级视图则靠右对齐 --> <LinearLayout android:layout_width="0dp" android:layout_height="200dp" android:layout_weight="1" android:layout_gravity="top" android:gravity="right" android:background="#ff0000" android:layout_margin="10dp" android:padding="10dp"> <!-- 内部视图的宽度和高度都是100dp,且背景色为青色 --> <View android:layout_width="100dp" android:layout_height="100dp" android:background="#00ffff" /> </LinearLayout> </LinearLayout>