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手势处理
ItemDecorationItem样式装饰器
ItemAnimatorItem动画
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代表的是垂直方向的瀑布流。
瀑布流效果
