第九课Android界面编程2-2:Layouts(布局)和Containers(容器)组件:CardView

二、Layouts(布局)和Containers(容器)

  说完了Activity,我们继续介绍其它界面组件。

  在组件面板上的Layouts组中有4种布局组件:ConstraintLayout、LinearLayout、FrameLayout和TableLayout。布局组件前面已经介绍过了,并且演示过ConstraintLayout与TableLayout的用法,这里就不重复了。其它2种布局组件用法比较简单,我就不一一介绍了,同学们可以自己找资料学习。

  我在这里主要介绍几个容器组件,通过它们来让大家知道容器是怎么回事。

1. CardView(卡片视图)

  第一个介绍的容器组件是CardView,它可以把放在其内部的组件进行卡片式的外观设置,比如圆角、阴影、边框等。它的使用很简单,只需要把组件拖到它的内部(或XML编写时写到CardView标签内),它就可以对它们进行统一的设置了。我们通过一个示例来说明。我们新建一个Activity名为CardViewTest,在它的layout文件上放一个CardView组件,并在其内放一个ImageView,同时放3个SeekBar(拖动条)用来进行参数设置,3个TextView来说明SeekBar的功能。XML代码如下:

<?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=".CardViewTest">
<androidx.cardview.widget.CardView android:id="@+id/cv" android:layout_width="wrap_content" android:layout_height="wrap_content" app:cardBackgroundColor="#00BCD4" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent">
<ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/p1" />
</androidx.cardview.widget.CardView>
<SeekBar android:id="@+id/sbCorner" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_marginTop="8dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/cv" />
<TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="8dp" android:text="设置圆角大小" app:layout_constraintStart_toEndOf="@+id/sbCorner" app:layout_constraintTop_toBottomOf="@+id/cv" />
<TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="8dp" android:text="设置阴影大小" app:layout_constraintStart_toEndOf="@+id/sbElevation" app:layout_constraintTop_toBottomOf="@+id/textView3" />
<SeekBar android:id="@+id/sbElevation" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_marginTop="8dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/sbCorner" />
<SeekBar android:id="@+id/sbPadding" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_marginTop="8dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/sbElevation" />
<TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginLeft="8dp" android:layout_marginTop="8dp" android:text="设置图片间距" app:layout_constraintStart_toEndOf="@+id/sbPadding" app:layout_constraintTop_toBottomOf="@+id/textView4" />
</androidx.constraintlayout.widget.ConstraintLayout>

  再在Java代码中进行对象的控制,代码如下:

public class CardViewTest extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_card_view_test);
final CardView cv = (CardView)findViewById(R.id.cv); SeekBar sbCorner = (SeekBar)findViewById(R.id.sbCorner); sbCorner.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { cv.setRadius(progress); }
@Override public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override public void onStopTrackingTouch(SeekBar seekBar) {
} }); SeekBar sbElevation = (SeekBar)findViewById(R.id.sbElevation); sbElevation.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { cv.setCardElevation(progress); }
@Override public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override public void onStopTrackingTouch(SeekBar seekBar) {
} }); SeekBar sbPadding = (SeekBar)findViewById(R.id.sbPadding); sbPadding.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { cv.setContentPadding(progress, progress, progress, progress); }
@Override public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override public void onStopTrackingTouch(SeekBar seekBar) {
} }); }}

  我们设置SeekBar的OnSeekBarChangeListener监听者对象,处理ProgressChanged事件,当progress值变化时(范围从0~100),CardView的圆角、阴影以及边框与图片的距离相应发生变化。

  CardView的作用其实与布局组件是类似的,同样是对内部的组件进行样式的统一管理,这是因为CardView本来就是Layout类的继承类,它是FrameLayout的继承类,因此它跟FrameLayout在使用上是类似的。它也可以像FrameLayout一样,在内部放多个组件,不同组件设置其layout_gravity属性就可以调整其位置,大家可以自己试试。

  与CardView一样是继承自FrameLayout的容器组件与布局组件还有好几个,它们的使用都是类似的,同学们可以看一下这张继承关系表。

这些继承类里除了容器组件外,还有布局组件。其实布局组件与容器组件是非常相似的,它们本身并不进行信息的展示,因此它们起的是组织管理的作用,但布局偏重于内部组件之间的关系(位置、间距、叠放层次等),而容器偏重于内部组件的表现方式与样式设置。类似的布局/容器组件还有继承自LinearLayout的一些组件,如下图所示:

  同学们可能发现了在这两张表里有的组件后面标了AndroidX,有的标了Material,这是Google提供的两个扩展库里的界面组件,但是在最新版的Android Studio中都已经自动加载了对这2个库的支持,我们可以忽略库的差别。


跟陶叔学编程第一季 零基础学习Android开发

第一课 第一个Android程序(1)

第一课 第一个Android程序(2)

第二课 Java语言基础1(1)

第二课 Java语言基础1(2)

第三课 Java语言基础2-1

第三课 Java语言基础2-2

第四课 Java语言基础3-1

第四课 Java语言基础3-2

第五课 类与面向对象编程1

第五课 类与面向对象编程1-2

第五课 类与面向对象编程1-3

第六课 类与面向对象编程2-1

第六课 类与面向对象编程2-2

第六课 类与面向对象编程2-3

第七课 JDK的使用1

第七课 JDK的使用2

第七课 JDK的使用3

第七课 JDK的使用4

第八课 Android界面编程1-1:界面设计、XML表示、布局组件

第八课 Android界面编程1-2:代码控制组件、尺寸单位

第八课 Android界面编程1-3:代码生成界面组件并设置位置 使用ConstrainLayout约束布局组件进行组件位置设置

第八课 Android界面编程1-4:完整21点扑克游戏、界面交互、对话框

第八课 Android界面编程1-5:游戏配置、横竖屏切换、生成签名apk文件


文章转载自微信公众号:跟陶叔学编程

类似文章