安卓高级组件(二)
作者：互联网
本章将介绍一下内容，均为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);
}
}
标签：index,安卓,高级,tabHost,new,组件,import,android,id 来源： https://blog.csdn.net/New_Bird_Advance/article/details/98577714