Android高级组件(二)

本章将介绍一下内容，均为XML设置UI：

• 选项卡(TabHost、tabWidget、FrameLayout)
• 图片切换器(ImageSwitcher)
• 网格视图(GridView)

选项卡(TabHost、tabWidget、FrameLayout)

之前写过两种标签的实现方式，此篇顶部标签与上两篇虽有差异但大同小异，直接上代码：

<?xml version="1.0" encoding="utf-8"?>
<TabHost
    android:id="@android:id/tabhost"
    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"
    tools:context=".MainActivity">
<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"
       >
    </TabWidget>
    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>
</LinearLayout>
</TabHost>

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabHost tabHost = findViewById(android.R.id.tabhost);
        tabHost.setup();
        LayoutInflater layoutInflater = LayoutInflater.from(MainActivity.this);
        layoutInflater.inflate(R.layout.tab1,tabHost.getTabContentView());
        layoutInflater.inflate(R.layout.tab2,tabHost.getTabContentView());
        tabHost.addTab(tabHost.newTabSpec("tab01").setIndicator("第一页").setContent(R.id.textView1));
        tabHost.addTab(tabHost.newTabSpec("tab01").setIndicator("第二页").setContent(R.id.textView2));
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="第一页" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="第二页" />
</LinearLayout>

图片切换器(ImageSwitcher)

类似于Windows下的图片查看器，可以有淡入淡出的效果，需要实现ViewSwitcher.ViewFectory接口并在其中手动构建并返回一个ImageView对象。
用到的方法：

方法	作用
setInAnimation()	设置图片切换的效果
setOutAnimation()	设置图片切换的效果
setFactoey()	图片显示工厂
setImageResource()	设置显示的图片

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <ImageSwitcher
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </ImageSwitcher>
    <Button
        android:id="@+id/up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="up"
        />
    <Button
        android:id="@+id/down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="down"
        />
</LinearLayout>

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;

import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;

public class MainActivity extends AppCompatActivity {
     int im[] = new int[]{R.mipmap.ic_launcher,R.mipmap.ic_launcher_round};
     int index = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button up = findViewById(R.id.up);
        Button down = findViewById(R.id.down);
        final ImageSwitcher imageSwitcher = findViewById(R.id.image);
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this,android.R.anim.fade_in));
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this,android.R.anim.fade_out));



        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(WRAP_CONTENT,WRAP_CONTENT));
                return imageView;
            }
        });


        up.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(index==1){
                    imageSwitcher.setImageResource(im[index]);
                }
                else {
                    index++;
                    imageSwitcher.setImageResource(im[index]);
                }
            }
        });

        down.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(index==0){
                    imageSwitcher.setImageResource(im[index]);
                }
                else {
                    index--;
                    imageSwitcher.setImageResource(im[index]);
                }
            }
        });
    }
}

网格视图(GridView)

用来显示图标与图片

属性	作用
android:columnWidth	列宽
android:gravity	对齐方式
android:horizontalSpacing	横向距离
android:numColumn	设置列数，若只有一列则用ListView
android:strechMode	设置拉伸模式 none不拉伸、spacingWidth拉伸元素间距、colimnWidth仅拉伸表格元素本身、spacingWidthUniform表格元素本身与元素之间的间距一起拉伸
android:verticalSpacing	设置元素之间的垂直间距

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">
    <GridView
        android:id="@+id/grad"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="2"
        android:gravity="center"
        android:stretchMode="columnWidth"
        >
    </GridView>
</RelativeLayout>

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

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:layout_height="wrap_content" />
</LinearLayout>

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.GridView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    int im[] = new int[]{R.mipmap.ic_launcher_round,R.mipmap.ic_launcher};
    String txt[] = new String[]{"圆的","方的"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GridView gridview = findViewById(R.id.grad);

        List<Map<String,Object>> list = new ArrayList<Map<String, Object>>();

        for(int i=0;i<im.length;i++){
            Map<String,Object> map = new HashMap<String, Object>();
            map.put("image",im[i]);
            map.put("title",txt[i]);
            list.add(map);
        }

        SimpleAdapter simpleAdapter = new SimpleAdapter(MainActivity.this,list,R.layout.demo,new String[]{"image","title"},new int[]{R.id.image,R.id.text});
        gridview.setAdapter(simpleAdapter);

    }
}