Android 开发 系统组件集合

常用的TextView、Button、ImageView和几个常用布局就不介绍了，我们介绍一些特别好用但是常常忘记的组件。

标题栏组件

<!--标题栏-->
    <android.support.v7.widget.Toolbar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </android.support.v7.widget.Toolbar>

滚动组件

        <ScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></ScrollView>

横向滚动组件

注意点：

1.滚动布局下，只能包含一个子布局，但是子布局下面可以包含多个布局。

主要api

<HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:background="#ff00ff" />

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:background="#000000" />

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="200dp"
                    android:background="#b7a500" />
            </LinearLayout>
        </HorizontalScrollView>

网格列表组件

更详细的博客

<GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:horizontalSpacing="1dp"
        android:numColumns="3"
        android:verticalSpacing="1dp">
    </GridView>

常用的属性：

android:numColumns="auto_fit" ，GridView的列数设置为自动

android:columnWidth="90dp"，每列的宽度，也就是Item的宽度

android:stretchMode="columnWidth"，缩放与列宽大小同步

android:verticalSpacing="10dp"，两行之间的边距

android:horizontalSpacing="10dp"，两列之间的边距

网格布局

更详细的博客

本身属性

• android:alignmentMode
• 说明：当设置alignMargins，使视图的外边界之间进行校准。可以取以下值：
• alignBounds – 对齐子视图边界。
• alignMargins – 对齐子视距内容。
• android:columnCount
• 说明：GridLayout的最大列数
• android:rowCount
• 说明：GridLayout的最大行数
• android:columnOrderPreserved
• 说明：当设置为true，使列边界显示的顺序和列索引的顺序相同。默认是true。
• android:orientation
• 说明：GridLayout中子元素的布局方向。有以下取值：
• horizontal – 水平布局。
• vertical – 竖直布局。
• android:rowOrderPreserved
• 说明：当设置为true，使行边界显示的顺序和行索引的顺序相同。默认是true。
• android:useDefaultMargins
• 说明： 当设置ture，当没有指定视图的布局参数时，告诉GridLayout使用默认的边距。默认值是false。

子元素属性

• android:layout_column
  说明：显示该子控件的列，例如android:layout_column=”0”,表示当前子控件显示在第1列，android:layout_column=”1”,表示当前子控件显示在第2列。

• android:layout_columnSpan
  说明：该控件所占的列数，例如android:layout_columnSpan=”2”,表示当前子控件占两列。

• android:layout_row
  说明：显示该子控件的行，例如android:layout_row=”0”,表示当前子控件显示在第1行，android:layout_row=”1”,表示当前子控件显示在第2行。

• android:layout_rowSpan
  说明：该控件所占的列数，例如android:layout_rowSpan=”2”,表示当前子控件占两行。

• android:layout_columnWeight
  说明：该控件的列权重，与android:layout_weight类似，例如有GridLayout上两列，都设置android:layout_columnWeight = “1”,则两列各占GridLayout宽度的一半

• android:layout_rowWeight
  说明：该控件的行权重，原理同android:layout_columnWeight。

<GridLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"></GridLayout>

表格布局

适合在桌面这种需要显示多个图标功能的情况下使用，所以别用ListView套GridView了，会麻烦死的。

<TableRow></TableRow> 为列表行

更详细的博客

 

<TableLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></TableLayout>

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableRow >
        <Button
            android:id="@+id/button01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1"      
        ></Button>
        <Button
            android:id="@+id/button02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2"      
        ></Button>
        <Button
            android:id="@+id/button03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4"      
        ></Button>
        <Button
            android:id="@+id/button05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮5"      
        ></Button>
        <Button
            android:id="@+id/button06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮6"      
        ></Button>
    </TableRow>

    <TableRow >
        <Button
            android:id="@+id/button07"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮7"      
        ></Button>
        <Button
            android:id="@+id/button08"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮8"      
        ></Button>
        <Button
            android:id="@+id/button09"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮9"      
        ></Button>
    </TableRow>    
</TableLayout>

多媒体控制器组件

更详细的博客

有快进，快退，进度条

<MediaController
            android:layout_width="match_parent"
            android:layout_height="match_parent"></MediaController>

 

标签栏组件

更详细的博客

<TabHost
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></TabHost>

选项卡组件（配合标题栏组件一起使用）

更详细的博客

<TabWidget
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></TabWidget>

下拉列表选择框组件

    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:entries="@array/books"
        android:popupBackground="#66ccff"
        android:dropDownWidth="230dp"></Spinner>

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></Spinner>

public class MainActivity extends AppCompatActivity {
    Spinner spinner;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取界面布局文件的Spinner组件
        spinner= (Spinner) findViewById(R.id.spinner);
        String[] arr={"孙悟空","猪八戒","唐僧"};
        //创建ArrayAdapter对象
        ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_multiple_choice,arr);
        spinner.setAdapter(adapter);
    }
}

列表内容下拉扩展组件

其实就是 ListView 加上 下拉列表框 功能的二合一

更详细的博客

 <ExpandableListView
        android:id="@+id/ev_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorWhite"
        android:divider="@null"
        android:groupIndicator="@null"
        android:cacheColorHint="#00000000"
        android:listSelector="#00000000" />

快速关联联系人组件（快速添加到联系人或者获取信息）

更详细的博客

	<QuickContactBadge 
	    android:id="@+id/badge"
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:src="@drawable/zgdx"/>

图片按钮组件

      <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_phone_book"/>

文本切换组件（支持有动画切换）

文字也要有切换动画才够酷炫！

更详细的博客 

        <TextSwitcher
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></TextSwitcher>

图片切换组件（支持有动画切换）

有动画切换图片了，肯定更加酷炫

更详细的博客

根据滑动方向切换图片

<ImageSwitcher
            android:layout_width="match_parent"
            android:layout_height="match_parent"></ImageSwitcher>

视频切换组件（支持有动画切换）

是的，三兄弟到齐了，为了切换动画！

更详细的博客，3种切换一起说明

       <ViewSwitcher
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"></ViewSwitcher>

图片轮播组件

你天天逛的淘宝，上面的让你心动的物品图片轮播，就是这种效果

  AdapterViewAnimator支持的XML属性如下：

• android:animateFirstView：设置显示组件的第一个View时是否使用动画。

• android:inAnimation：设置组件显示时使用的动画。

• android:loopViews：设置循环到最后一个组件时是否自动跳转到第一个组件。

• android:outAnimation：设置组件隐藏时使用的动画。

• 

<AdapterViewFlipper
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></AdapterViewFlipper>

滑动按钮组件

一键双状态，但是是滑动开关图标的样子

<!--滑动按钮-->
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

拖动条组件

android系统的亮度条件拖动条看过没？就是那种样子

<!--拖动条按钮-->
    <SeekBar
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:max="200"
        android:background="@color/text_gray6"/>

叠堆组件

类似图片叠放在一起的效果

 <StackView
        android:layout_width="100dp"
        android:layout_height="100dp"></StackView>

单选按钮组件

<!--单选按钮-->
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

单选按钮组

只能在多个选择里，选中一个的按钮组件，选择一个后，另外一个选中的会自动取消

 <!--多选按钮组-->
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B"/>
    </RadioGroup>

复选框组件

<CheckBox
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

带文字的复选框组件

什么？你还在用TextView在加CheckBox实现复选框功能？快使用带文字的复选框试试吧，优点比CheckBox 有更大的点击范围，点击文字也可以支持勾选，用户操作上更舒服。

<CheckedTextView
        android:id="@+id/checktv_title"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/listPreferredItemHeight"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:gravity="center_vertical"
        android:checkMark="?android:attr/listChoiceIndicatorMultiple"
        android:paddingLeft="6dip"
        android:filterTouchesWhenObscured="true"
        android:focusableInTouchMode="true"
        android:text="公司"
        android:textSize="12sp"
        android:paddingRight="6dip"/>

双向开关组件

跟你家里的灯的开关按钮一样，它一个按键支持两种状态

 <!--双向开关按钮组件-->
   <ToggleButton
        android:id="@+id/btn_offAndOn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textOff="关闭功能"
        android:textOn="启用功能"/>

mBtn = (ToggleButton)findViewById(R.id.btn_offAndOn);
mBtn.setOnClickListener(this);
@Override
    public void onClick(View view) {
        switch (view.getId()){
           case R.id.btn_offAndOn:
                Intent intent = new Intent(MainActivity.this,PhoneServer.class);
                if (mBtnWiFiAP.isChecked()){
                    startService(intent);
                }else {
                    stopService(intent);
                }
                break;
            default:
                break;
        }

视图翻页

这是一个需要创建适配器的View，最常用的场景是在app进入后的引导页面，翻页方式为一页一页

 <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

视图翻页的兄弟ViewFlipper（快速翻页）

这是一个需要创建适配器的View，最常用的场景是在图库里的图片浏览界面，翻页方式为快速拖动

更详细的博客

<ViewFlipper
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"></ViewFlipper>

自动补全文本框

更详细的博客

<MultiAutoCompleteTextView
           android:layout_width="match_parent"
           android:layout_height="match_parent" />

输入框自动提示组件

<AutoCompleteTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

更详尽的博客

属性	对应方法	描述
android:completionHint	setCompletionHint(CharSequence)	设置下拉菜单中的提示标题
android:completionHintView		设置下拉菜单中提示标题的视图
android:completionThreshold	setThreshold(int)	设置用户至少输入几个字符才会显示提示。默认为 2 个
android:dropDownSelector		设置选中的item背景色
android:dropDownAnchor	setDropDownAnchor(int id)	它的值是一个View的ID，指定后，AutoCompleteTextView会在这个View下弹出自动提示。
android:dropDownWidth		设置自动提示列表的宽度。
android:dropDownHeight		设置自动提示列表的高度。
原属性之外的几个常用方法
android:dropDownHorizontalOffest		设置下拉菜单与文本框之间的水平偏移，下拉菜单默认与文本框左对齐
adnroid:dropDownVerticalOffest		设置下拉菜单与文本框之间的垂直偏移，下拉菜单默认紧跟文本框
android:popupBackground	setDropDownBackgroundResource(int)	设置下拉菜单的背景

评分组件（给产品快速评分）

        <RatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

进度条组件

         <!--默认圆环进度条-->
        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:max="100"/>

        <!--水平进度条-->
       <ProgressBar
           android:layout_width="200dp"
           android:layout_height="wrap_content"
           style="?android:attr/progressBarStyleHorizontal"
           android:max="100"/>

数字选择器组件（自定义选择器）

更详细的博客

<NumberPicker
           android:layout_width="match_parent"
           android:layout_height="match_parent"></NumberPicker>

日历组件

 <CalendarView
        android:layout_width="match_parent"
        android:layout_height="match_parent"></CalendarView>

计时器组件

<Chronometer
    android:id="@+id/cRecordPopTime"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginBottom="@dimen/d24"
    android:fontFamily="sans-serif-light"
    android:textColor="@color/fontHint"
    android:textSize="@dimen/s13"
    tools:targetApi="jelly_bean" />

Chronometer mChronometer;
mChronometer.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
    @Override
    public void onChronometerTick(Chronometer cArg) {
        long time =System.currentTimeMillis() - cArg.getBase();
        Date d = new Date(time);
        SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss", Locale.US);
        sdf.setTimeZone(TimeZone.getTimeZone("UTC"));
        timeView.setText(sdf.format(d));
    }
});
timeView.setBase(System.currentTimeMillis());
timeView.start();

时间显示组件

<TextClock
        android:id="@+id/time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="@dimen/time_size"
        android:textColor="@color/theme_color"
        android:format24Hour="hh:mm"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"/>

    <TextClock
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="@dimen/size_25"
        android:textColor="@color/theme_color"
        android:format24Hour="MM月dd日 EEEE"
        android:layout_below="@id/time"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"/>

时间选择器组件

<TimePicker
        android:id="@+id/tiem_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:timePickerMode="spinner"
        android:layout_gravity="center"
        android:numbersTextColor="@color/theme_color"
        android:scaleY="1.5"
        android:scaleX="1.5"/>

//时间值传入，并且设置修改时间选择器的时间显示
    public void timeDataInit(){
        Intent intent = getIntent();
        mHour = intent.getIntExtra(KEY_HOUR,-1);
        mMinute = intent.getIntExtra(KEY_MINUTE,-1);
        if(mHour != -1 && mMinute != -1){
            mTiemPicker.setCurrentHour(mHour);
            mTiemPicker.setCurrentMinute(mMinute);
        }else {
            Log.e("SelectionTiem","传入的时间值为空");
        }
    }

@Override
    public void initData() {
        //将时间选择器里的值传出
        mTiemPicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                mHour = hourOfDay;
                mMinute = minute;
            }
        });
    }

时间选择器对话框组件

new TimePickerDialog(this,new TimePickerDialog.OnTimeSetListener() {

            @Override
            public void onTimeSet(TimePicker view, int hourOfDay, int minute) {
                houre = hourOfDay;
                WuraoActivity.this.minute = minute;
                if (WuraoActivity.this.minute < 10){
                    endTimeTv.setText(houre+":"+"0"+WuraoActivity.this.minute);
                }else {
                    endTimeTv.setText(houre+":"+WuraoActivity.this.minute);
                }
            }
        }, 0, 0, true).show();

日期选择器组件

<DatePicker
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></DatePicker>

日期选择器对话框组件

/**
 * 日期选择
 * @param activity
 * @param themeResId
 * @param tv
 * @param calendar
 */
public static void showDatePickerDialog(Activity activity, int themeResId, final TextView tv, Calendar calendar) {
    // 直接创建一个DatePickerDialog对话框实例，并将它显示出来
    new DatePickerDialog(activity , themeResId,new DatePickerDialog.OnDateSetListener() {
            // 绑定监听器(How the parent is notified that the date is set.)
        @Override
        public void onDateSet(DatePicker view, int year,  int monthOfYear, int dayOfMonth) {
            // 此处得到选择的时间，可以进行你想要的操作
            tv.setText("您选择了：" + year + "年" + (monthOfYear+1)+ "月" + dayOfMonth + "日");

        }
    }
            // 设置初始日期
            , calendar.get(Calendar.YEAR)
            ,calendar.get(Calendar.MONTH)
            ,calendar.get(Calendar.DAY_OF_MONTH)).show();
}

视频播放组件

         <VideoView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

视频动画组件

更详细的博客

在Android中，ViewAnimator是FrameLayout的一个子类，用来做Views之间的切换。它是一个变换控件的
元素，帮助我们在Views之间（如TextView, ImageView或者其他layout）添加变换。它有助于在屏幕view添加动画。ViewAnimator可以在两个及以上Views上平滑的切换，通过合适动画，提供从一个View到另外一个View变换的方式。

        <ViewAnimator
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"></ViewAnimator>

视图存根组件

更详细的博客

要显示某些控件了，在加载，节省内存～   跟android:visibility="gone"属性说拜拜

        <ViewStub
           android:layout_width="wrap_content"
           android:layout_height="wrap_content" />

曲面视图（这个View，不跟整个window一起刷新，而是单独刷新，一般在这个View里放入视频组件）

SurfaceView就是在Window上挖一个洞，它就是显示在这个洞里，其他的View是显示在Window上，所以View可以显示在 SurfaceView之上，你也可以添加一些层在SurfaceView之上。（例如在上面设置一些按钮控件）我们知道View的更新只能在UI线程中，所以使用自定义View没办法这么做，但是SurfaceView就可以了。它一个很好用的地方就是允许其他线程(不是UI线程)绘制图形(使用Canvas)，根据它这个特性，你就可以控制它的帧数，你如果让这个线程1秒执行50次绘制，那么最后显示的就是50帧。（一般使用thread.sleep(20);代表一秒刷新50次）
SurfaceView能够自己控制执行帧数的对象，这样可以弥补View的不足，因为有时候View的帧数太低了，这会导致画面效果不顺畅，影响体验效果。

SurfaceView是在一个新起的单独线程中可以重新绘制画面，而View必须在UI的主线程中更新画面。那么在UI的主线程中更新画面 可能会引发问题，比如你更新画面的时间过长，那么你的主UI线程会被你正在画的函数阻塞。那么将无法响应按键，触屏等消息。当使用surfaceView 由于是在新的线程中更新画面所以不会阻塞你的UI主线程。但这也带来了另外一个问题，就是事件同步。比如你触屏了一下，你需要surfaceView中 thread处理，一般就需要有一个event queue的设计来保存touch event，这会稍稍复杂一点，因为涉及到线程同步。
所以基于以上，根据游戏特点，一般分成两类
1 被动更新画面的。比如棋类，这种用view就好了。因为画面的更新是依赖于 onTouch 来更新，可以直接使用 invalidate。 因为这种情况下，这一次Touch和下一次的Touch需要的时间比较长些，不会产生影响。
2 主动更新。比如一个人在一直跑动。这就需要一个单独的thread不停的重绘人的状态，避免阻塞main UI thread。所以显然view不合适，需要surfaceView来控制。
本质区别：
View：必须在UI的主线程中更新画面，用于被动更新画面。
surfaceView：UI线程和子线程中都可以。在一个新启动的线程中重新绘制画面，主动更新画面。

<SurfaceView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

TextureView（与上面的SurfaceView类似，但是它支持组件动画）

更详细的博客

<TextureView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />