【安卓基础重点知识6】常用布局

用户00445215930
0 阅读8分钟

1. LinearLayout

1.1 常见属性

android:id="@+id/"
android:layout_width
android:layout_height
andorid:orientation//排列方向
        horizontal 水平
        vertical 垂直
andorid:gravity  
        center：整体居中
        left | start | top：左居中
        right | end:右居中
        bottom：底部
        center_horizontal：水平居中
        center_vertical：垂直居中
andorid:layout_weight//所占权重，对应的layout_width或者layout_height设置为0dp，如果没有设置为0dp，
那么划分的就是剩下的部分，比如一个布局先设置了layout_width=200dp，那么就对剩下的部分进行划分

//外部边距
android:layout_margin        整体距离
android:layout_marginTop        顶部距离
android:layout_marginLeft  / android:layout_marginStart        左部距离
android:layout_marginRight  /  android:layout_marginEnd        右部距离
android:layout_marginBottom        底部距离 

//内部边距
android:padding        整体距离
android:paddingTop        顶部距离
android:paddingLeft  /  android:paddingStart        左部距离
android:paddingRight  /  android:paddingEnd        右部距离
android:paddingBottom        底部距离

divider： 设置布局之间的分割线，可以通过图片指定样式
dividerPadding： 分割线之间的间距
showDividers： 设置分割线的位置，有以下可选值：
        beginning：在元素之前展示分割线
        end：在元素之后展示分割线
        middle：在每个元素之间展示分割线
        none：不展示

1.2 设置分割线

LinearLayout里面写一个View

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/black"/>

使用LinearLayout的一个divider属性

  • 准备一张线的照片，android:divider设置作为分割线的图片，src/main/res/drawable 下面创建 line_div.xml 内容为
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#808080" /> <!-- 灰色背景 -->
    <size android:height="1dp" /> <!-- 定义细线高度为1dp -->
</shape>

  • android:showDividers 设置分割线的位置：none(无)、beginning(开始)、end(结束)、middle(每两个组件间)

  • android:dividerPadding 设置分割线的可以控制分隔线与子视图之间的间距，使布局在显示分隔线时具有更灵活的外观效果，主要用于 AdapterView（如ListView、GridView）中的分隔线样式

2. FrameLayout

这个布局直接在屏幕上开辟出一块空白的区域，往里面添加控件的时候，会默认把他们放到这块区域的左上角，而这种布局方式却没有任何的定位方式，所以它应用的场景并不多，适用于叠加式布局，如显示叠加的图层或显示临时的提示信息等。虽然默认会将控件放置在左上角,但是可以通过layout_gravity属性，指定到其他的位置。

2.1 常见属性

  • ** android:foreground:**设置改帧布局容器的前景图像

  • ** android:foregroundGravity:**设置前景图像显示的位置

    取值：top、bottom、left、right、center

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@drawable/cat"
    android:foregroundGravity="right|bottom">

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#2eaa0f" />
    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#bdaccc" />
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#77b8ff" />

</FrameLayout>

3. RelativeLayout

根据父容器和兄弟容器作为参照，确定控件的布局方式

3.1 常见属性

//相对父容器
android:layout_alignParentLeft="true" 父容器左边
android:layout_alignParentRight="true" 父容器右边
android:layout_alignParentTop="true" 父容器顶部
android:layout_alignParentBottom="true" 父容器底部
android:layout_centerHorizontal="true" 水平方向居中
android:layout_centerVertical="true" 垂直方向居中
android:layout_centerInParent="true" 水平垂直都居中

//相对兄弟容器
android:layout_toLeftOf="@+id/button1" 在button1控件左方
android:layout_toRightOf="@+id/button1" 在button1控件右方
android:layout_above="@+id/button1" 在button1控件上方
android:layout_below="@+id/button1" 在button1控件下方
android:layout_alignLeft="@+id/button1" 与button1控件左边平齐
android:layout_alignRight="@+id/button1" 与button1控件右边平齐
android:layout_alignTop="@+id/button1" 与button1控件上边平齐
android:layout_alignBottom="@+id/button1" 与button1控件下边平齐
android:layout_alignBaseline        控件的基线与指定控件的基线对齐。

4. **ConstraintLayout **

ConstraintLayout 是一个使用“相对定位”灵活地确定微件的位置和大小的一个布局，它的出现是为了解决开发中过于复杂的页面层级嵌套过多的问题——层级过深会增加绘制界面需要的时间，影响用户体验，以灵活的方式定位和调整小部件

该组件包含内容丰富，详细介绍见 【安卓基础重点知识7】ConstraintLayout

5. RecyclerView

RecyclerView 是一个容器，显示大量数据集合，提供了更多的灵活性和可定制的布局，实现各种复杂的布局效果和动画效果，适用于各种需要列表或网格显示的Android应用，无论是简单的联系人列表还是复杂的瀑布流布局，甚至是在列表项中嵌入复杂交互，RecyclerView都能胜任

5.1 基本概念

  • 工作原理：RecyclerView通过回收（recycling）机制来优化性能。当子项滑出屏幕时，其视图并不会被销毁，而是被放入一个缓存队列中，等待被重新使用。当新的子项需要显示时，RecyclerView会从缓存队列中取出之前创建的视图并重新绑定数据，从而避免了不必要的视图创建和销毁操作。

  • ViewHolder：ViewHolder是RecyclerView中用于缓存子项视图的类。每个ViewHolder都持有一个子项视图的引用，从而可以在需要时快速访问和复用视图。

  • Adapter：Adapter是连接数据源和RecyclerView的桥梁。通过实现Adapter接口，可以将数据源中的数据映射到RecyclerView的子项视图中，并控制子项视图的创建、绑定和回收。

5.2 与ListView的区别

ListViewRecyclerView
Adapter中的ViewHolder模式没有严格的ViewHolder设计模式Adapter必须按照ViewHolder模式实现至少一个ViewHolder
定制Item视图只能实现垂直线性排列的列表视图以通过设置RecyclerView.LayoutManager来定制不同风格的视图，比如水平滚动列表或者不规则的瀑布流列表
Item动画不支持通过设置RecyclerView.ItemAnimator来为Item增加动画效果
设置数据源针对不同数据封装了各种类型的Adapter，比如用来处理数组的ArrayAdapter和用来展示Database结果的CursorAdapter自定义实现RecyclerView.Adapter并为其提供数据集合
设置Item分割线ListView中可以通过设置android:divider属性来为两个Item间设置分割线RecyclerView.ItemDecoration，这种实现方式更灵活，样式也更加丰富
设置Item点击事件AdapterView.OnItemClickListener接口，用来绑定Item的点击事件RecyclerView.OnItemTouchListener，用来响应Item的触摸事件

5.3 使用

  • 步骤一：在布局文件中添加控件
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent" />
  • 步骤二：新建实体类，这里建立了动物的实体类
package com.example.day5_layout;

public class Animal {
    Integer animalID;
    String animalName;

    public Integer getAnimalID() {
        return animalID;
    }

    public String getAnimalName() {
        return animalName;
    }

    public void setAnimalID(Integer animalID) {
        this.animalID = animalID;
    }

    public void setAnimalName(String animalName) {
        this.animalName = animalName;
    }

    public Animal(Integer animalID, String animalName) {
        this.animalID = animalID;
        this.animalName = animalName;
    }
}
  • 步骤三：创建RecyclerView中的子项布局，这里我们依据实体类中定义的属性，放入一个文本控件和ImageView控件；
<ImageView
    android:id="@+id/image_animal"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:scaleType="centerInside"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    tools:srcCompat="@tools:sample/avatars" />
<TextView
    android:id="@+id/tv_animal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="TextView"
    android:textSize="29dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/image_animal"
    app:layout_constraintTop_toBottomOf="@+id/image_animal" />
  • 步骤四：然后为RecyclerView创建一个适配器，这个适配器继承自RecyclerView.Adapter，并将泛型指定为AnimalAdapter.viewHolder。其中ViewHolder是我们在适配器内部创建的一个内部类，作用和使用ListView时类似；
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {

    private List<Animal> animalList;
    
    public RecyclerAdapter(List<Animal> animalList) {
        this.animalList = animalList;
    }

    static class ViewHolder extends RecyclerView.ViewHolder{
        ImageView animal_image;
        TextView animal_name;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            animal_image = itemView.findViewById(R.id.image_animal);
            animal_name = itemView.findViewById(R.id.tv_animal);
        }
    }

    @NonNull
    @Override
    public RecyclerAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //加载布局
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.animal_item, parent, false);
        ViewHolder holder = new ViewHolder(itemView);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerAdapter.ViewHolder holder, int position) {
        //赋值
        Animal animal = animalList.get(position);
        holder.animal_image.setImageResource(animal.getAnimalID());
        holder.animal_name.setText(animal.getAnimalName());
        //单个item点击的监听
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast t = Toast.makeText(view.getContext(), "你点击了按钮" + animalList.get(position).animalName, Toast.LENGTH_SHORT);
                t.setGravity(Gravity.TOP,0,0);
                t.show();
            }
        });
    }

    @Override
    public int getItemCount() {
        return animalList.size();
    }

}
  • 步骤五：在Activity中绑定Adapter以及初始化动物数据
public class MainActivity extends AppCompatActivity {

    private List<Animal> list = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });
        initAnimals();
        RecyclerView recycle_view = findViewById(R.id.recycler_view);
        //使用LinearLayoutManager，类似与ListView
//        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
//        recycle_view.setLayoutManager(linearLayoutManager);
        //使用瀑布流，第一个参数指定列数，第二个指定方向
//        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL);
//       recycle_view.setLayoutManager(layoutManager);
        
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
        recycle_view.setLayoutManager(gridLayoutManager);

        RecyclerAdapter recyclerAdapter = new RecyclerAdapter(list);
        recycle_view.setAdapter(recyclerAdapter);
    }

    private void initAnimals(){
        Animal animal = new Animal(R.drawable.cat, "猫猫");
        list.add(animal);
        Animal animal1 = new Animal(R.drawable.cow, "牛啊牛");
        list.add(animal1);
        Animal animal2 = new Animal(R.drawable.dog, "狗啊");
        list.add(animal2);
        Animal animal3 = new Animal(R.drawable.pig, "猪啊猪");
        list.add(animal3);
        Animal animal4 = new Animal(R.drawable.horse, "马");
        list.add(animal4);
        Animal animal5 = new Animal(R.drawable.mouse, "小老鼠");
        list.add(animal5);
        Animal animal6 = new Animal(R.drawable.rabbit, "小白兔");
        list.add(animal6);
        Animal animal7 = new Animal(R.drawable.snake, "snake");
        list.add(animal7);
        Animal animal8 = new Animal(R.drawable.tiger, "大老虎");
        list.add(animal8);

    }
}

以下为效果展示，分别为使用LinearLayoutManager、使用StaggeredGridLayoutManager以及使用GridLayoutManager的实验效果

blog.csdn.net/m0\\\\_7339…

本系列【安卓基础重点知识】是刚开始学习android的时候记录的，其中部分内容来自网页，忘记记录来源了，如需添加引用，联系我即可

avatar
文章
阅读
粉丝