Android-基本布局和UI组件

1.线性布局LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#000000"
    android:orientation="vertical">
    <Button
        android:layout_width="100dp"
        android:backgroundTint="#ff0000"
        android:text="@string/app_name"
        android:textColor="#0000ff"
        android:layout_height="40dp" />
    <Button
        android:layout_width="100dp"
        android:layout_height="40dp" />
    <Button
        android:layout_width="100dp"
        android:layout_height="40dp" />
</LinearLayout>

orientation可以设置vertical(垂直布局)或者horizontal(水平布局)
layout_width的match_parent表示撑满父组件，wrap_content表示随着子组件内容变动

2.相对布局RelativeLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_alignParentTop="true"
        android:insetTop="0dp"
        android:insetBottom="0dp" />
    <Button
        android:id="@+id/btn2"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_toEndOf="@+id/btn1"
        android:layout_marginStart="20dp"
        android:insetTop="0dp"
        android:insetBottom="0dp" />
    <Button
        android:id="@+id/btn3"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_below="@+id/btn2"
        android:layout_toEndOf="@+id/btn2"
        android:insetTop="0dp"
        android:insetBottom="0dp" />
    <Button
        android:id="@+id/btn4"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_below="@+id/btn3"
        android:layout_toEndOf="@+id/btn3"
        android:insetTop="0dp"
        android:insetBottom="0dp" />
</RelativeLayout>

layout_alignParentTop为true表示在父组件的顶部
layout_toEndOf表示在某个组件的尾部
layout_below表示在某个组件的下面
layout_marginStart表示在组件开始部分的外边距

3.帧布局FrameLayout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <Button
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"/>
    <Button
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:backgroundTint="@color/cardview_light_background"
        android:layout_gravity="center"/>
    <Button
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:backgroundTint="@color/design_default_color_error"
        android:layout_gravity="center"/>
    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:backgroundTint="@color/design_default_color_on_secondary"
        android:layout_marginStart="50dp"
        android:layout_gravity="center"/>
</FrameLayout>

帧布局中子组件的layout_gravity属性表示该组件在父组件的位置，center表示居中
layout_marginStart可以设置在相对位置后左边距离

4. 按钮组MaterialButtonToggleGroup

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/buttonGroup"
        android:layout_width="match_parent"
        android:layout_marginTop="50dp"
        app:singleSelection="true"
        app:selectionRequired="true"
        app:checkedButton="@id/btn11"
        android:layout_height="60dp">
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn11"
            android:layout_width="0dp"
            android:layout_weight="1"
            app:cornerRadius="25dp"
            android:layout_height="match_parent"/>
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn22"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:backgroundTint="@color/black"
            android:layout_height="match_parent"/>
        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn33"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:backgroundTint="@color/design_default_color_error"
            app:cornerRadius="25dp"
            android:layout_height="match_parent"/>

    </com.google.android.material.button.MaterialButtonToggleGroup>

singleSelection为true表示只能单选
selectionRequired为true表示必须必须有一个选中的
checkedButton可以设置默认选中的项

5.文本控件TextView

<TextView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="@color/design_default_color_error"
        android:text="123456789fdsfdsfsdfdsfdsfdsfsd"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:maxLines="1"
        android:ellipsize="end"
        tools:ignore="HardcodedText" />

text设置文本内容
textSize设置字号大小
maxLines限制行数
ellipsize设置显示不完整时候的样式，一般就使用start(开头) end(结尾) marquee(跑马灯)这3个

6.图片组件ImageView

<ImageView
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="30dp"
        android:scaleType="centerCrop"
        android:src="@drawable/img_123" />

scaleType用来设置图片的填充模式，有fitCenter、centerCrop、centerInside、fitStart、fitEnd、fitXY、matrix 和 center

7.RecyclerView高级UI控件

Diffutil 增量差分异刷新
onItemTouchListener 手势处理
ItemDecoration Item样式装饰器
ItemAnimator Item动画
SnapHelper 惯性动画
SmoothScroller 滑动速度控制
Recycler 四级回收、复用机制
LayoutManager 负责列表的布局
RecyclerView.Adapter 负责列表数据源的适配
Recycler.ViewHolder 负责列表ItemView的复用

在fragment中添加一个RecycleView，并且给赋值ID:Recycler_View:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".ui.home.HomeFragment">
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="false"
        android:paddingBottom="40dp"
        android:id="@+id/Recycler_View"
        >
    </androidx.recyclerview.widget.RecyclerView>
</androidx.constraintlayout.widget.ConstraintLayout>

接着，定义个可以服用的itemLayout，具体是左侧一个图标，右侧是一个上下2个文本组件，上面的定义ID为top_textview:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="80dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        tools:ignore="UselessLeaf">

        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:id="@+id/item_image"
            android:src="@drawable/img_456"
            android:scaleType="centerCrop"
            />
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            tools:ignore="NestedWeights">
            <TextView
                android:id="@+id/top_textview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:ellipsize="end"
                android:text="文字蚊子蚊子"
                android:textSize="20sp"
                tools:ignore="HardcodedText" />
            <TextView
                android:id="@+id/bottom_textview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:ellipsize="end"
                android:text="小文字小蚊子小蚊子"
                android:layout_marginTop="5dp"
                android:textSize="12sp"
                tools:ignore="HardcodedText" />
        </LinearLayout>

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

</LinearLayout>

在Fragment中通过binding.RecyclerView获取到我们声明的RecycleView，要想实现基本的列表展示，需要给RecycleView的layoutManager和adapter进行赋值.

override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val homeViewModel =
            ViewModelProvider(this).get(HomeViewModel::class.java)

        _binding = FragmentHomeBinding.inflate(inflater, container, false)
        val root: View = binding.root
        val recyclerView = binding.RecyclerView
        recyclerView.layoutManager = LinearLayoutManager(context,LinearLayoutManager.VERTICAL,false)
        recyclerView.adapter = MyAdapter()

        return root
    }

上述代码中出现的MyAdapter，需要我们自定义来实现，在adapter中必须要实现三个方法为onCreateViewHolder(视图)、getItemCount(数量)和onBindViewHolder(数据绑定)，其中：

inner class MyAdapter: RecyclerView.Adapter<MyViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
    val itemView = LayoutInflater.from(context).inflate(R.layout.list_item_layout,parent,false)
       return MyViewHolder(itemView)
    }
   override fun getItemCount(): Int {
        return 20
    }
    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.topTextView.text = "$position 这是标题标题标题"
        holder.btmTextView.text = "这是一个小描述"
    }
}
class MyViewHolder(view:View):RecyclerView.ViewHolder(view) {
    val topTextView: TextView = itemView.findViewById(R.id.top_textview)
    val btmTextView: TextView = itemView.findViewById(R.id.bottom_textview)
}

最终的实现效果是这样的：

列表

在RecycleView中，如果要设置多列的模式，需要使用recyclerView.layoutManager = GridLayoutManager(context,2)，这里的2是代表2列的意思，可以根据自己的需要进行修改，这样的设置是每个项目的高度都是相等的，如果要实现瀑布流的样式，则需要使用recyclerView.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)，2代表的是2列，StaggeredGridLayoutManager.VERTICAL代表的是垂直方向的瀑布流。

瀑布流效果