共计 4793 个字符,预计需要花费 12 分钟才能阅读完成。
Some Container Widget in Android App
Android 应用中一些常用的容器控件
1. Android 中常见的容器控件
Spinner 下拉控件
主要的属性:
- entries: 在 xml 布局文件中绑定数据源(
* entries="@array/languages"
)(可以不设置,即可以在 Activity 中动态绑定) - spinnerMode: Spinner 的显示形式(dropdown 下拉菜单,dialog 弹出框)
- prompt:在 Spinner 弹出选择对话框的时候对话框的标题:
-
- dropDownHorizontalOffset: 下拉的项目选择窗口在水平方向相对于 Spinner 窗口的偏移量 px(像素)、dp(密度无关的像素)、sp(基于引用字体的尺寸来缩放的像素)、in(英寸)、mm(毫米)
- dropDownSelector: dropdown 时列表选择器的显示效果。
- dropDownVerticalOffset : dropdown 时,下拉的项目选择窗口在垂直方向相对于 Spinner 窗口的偏移量
- dropDownWidth : 设定下拉框的宽度
- popupBackground : dropdown”时,使用这个属性来设置下拉列表的背景
val spinner = findViewById<Spinner>(R.id.demo_spinner)
val languages= listOf("java", "c++", "kotlin", "swift")
val adapter =
ArrayAdapter(this, android.R.layout.simple_spinner_item, languages) // 未展开菜单时 Spinner 的默认样式
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item) // 下拉菜单的样式
spinner.adapter = adapter
spinner.onItemSelectedListener = object : OnItemSelectedListener {override fun onItemSelected( parent: AdapterView<*>?, view: View?, pos: Int, id: Long) {val languages= listOf("java", "c++", "kotlin", "swift")
Log.e(TAG, "onItemSelected 你点击的是:" + languages[pos]) }
override fun onNothingSelected(parent: AdapterView<*>?) {Log.e(TAG, "onNothingSelected")
}
}
spinner.setSelection(2)
GridView
主要的属性:
- numColumns=”auto_fit”//GridView 的列数设置为自动
- columnWidth=”90dp ” // 每列的宽度,也就是 Item 的宽度
- stretchMode=”columnWidth” // 缩放与列宽大小同步
- verticalSpacing=”10dp”// 两行之间的边距
- horizontalSpacing=”10dp”// 两列之间的边距
- cacheColorHint=”#00000000″ // 去除拖动时默认的黑色背景
- listSelector=”#00000000″ // 去除选中时的 yello 底色
- scrollbars=”none” // 隐藏 GridView 的滚动条
- fadeScrollbars=”true” // 设置为 true 就可以实现滚动条的自动隐藏和显示
- fastScrollEnabled=”true” //GridView 出现快速滚动的按钮(至少滚动 4 页才会显示)
- fadingEdge=”none” //GridView 衰落 (褪去) 边缘颜色为空,缺省值是 vertical。(可以理解为上下边缘的提示色)
- fadingEdgeLength=”10dip” // 定义的衰落 (褪去) 边缘的长度
- stackFromBottom=”true” // 设置为 true 时,你做好的列表就会显示你列表的最下面
- transcriptMode=”alwaysScroll” // 当你动态添加数据时,列表将自动往下滚动最新的条目可以自动滚动到可视范围内
- drawSelectorOnTop=”false” // 点击某条记录不放,颜色会在记录的后面成为背景色, 内容的文字可见(缺省为 false)
val grid_view = findViewById<GridView>(R.id.demo_gridview)
val numbers= listOf("一", "二", "三", "四","五","六")
grid_view.adapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, numbers)
grid_view.numColumns = 3
// 注册单元格的点击事件
grid_view.setOnItemClickListener { parent, view, position, id ->
Log.e(TAG, "GridView setOnItemClickListener 你点击的是:" + numbers[position])
}
ListView
val listview = findViewById<ListView>(R.id.demo_listview)
val fruits= listOf("第一个是列表", "Apple", "Orange", "Pear", "Peach")
listview.adapter = ArrayAdapter<String> = ArrayAdapter(this,android.R.layout.simple_list_item_1,fruits)
listview.setOnItemClickListener {adapterView, view, postion, var4 -> Log.e(TAG, "ListView OnItemClick: $postion") }
TabHost
标签页,常常结合 TabWidget + FrameLayout 使用
<TabHost
android:id="@+id/demo_tabhost"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/demo_horizontalscrollview">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!-- FrameLayout 布局,id 值不可变 -->
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@android:id/tabs">
<!-- 第一个 tab 的布局 -->
<LinearLayout
android:id="@+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第一个 tab 的布局" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第 2 个 tab 的布局" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第 3 个 tab 的布局" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
简单的配置
val tab = findViewById<TabHost>(R.id.demo_tabhost)
tab.setup() // 初始化 TabHost 容器
tab.addTab(tab.newTabSpec("tab1").setIndicator("未接来电", null).setContent(R.id.tab1)) // 在 TabHost 创建标签,然后设置:标题/图标/标签页布局
tab.addTab(tab.newTabSpec("tab2").setIndicator("已接来电", null).setContent(R.id.tab2))
tab.addTab(tab.newTabSpec("tab3").setIndicator("呼出通话", null).setContent(R.id.tab3))
tab.setOnTabChangedListener {var1 -> Log.e(TAG, "TabHost OnTabChanged: $var1") }
ScrollView 滚动视图
HorizontalScrollView 横向滚动视图
2. AndroidX 中推荐的容器控件
RecyclerView
androidx.recyclerview.widget.RecyclerView
ToolBar
3. Material Design 下的控件
CardView 卡片视图
AppBarLayout 标题栏
BottomAppBar 底部栏
NavigationView 导航栏
BottomNavigationView 底部导航栏
com.google.android.material.bottomnavigation.BottomNavigationView
TabLayout
TabItem
4. 一些特殊的容器控件
ViewStub
include
fragment
View
requestFocus
正文完