扣丁學堂筆記第06天高級UI組件(二)


1.ExpandableListView

可擴展ListView,可以顯示兩級列表的視圖,常用於分類

實現步驟:

新建一個MyAdapter繼承自BaseExpandableListAdapter,重寫它的10個方法;

定義一個分組名稱,再定義一個分組成員(二維數組);getGroupCount返回數組的長度;getChildrenCount返回數組的長度;getGroup返回group[groupPosition];getChild返回childs[groupPosition][childPosition]:getGroupId返回groupPosition;getChildId返回childPosition;hasStableIds不用重寫;isChildSelectable返回true;

新建一個group_layout.xml,添加一個ImageView和TextView;然后復制一個child_layout.xml;

重寫getGroupView和getChildView方法,同listView的getView方法

並且可以設置child的點擊事件


Mainactivity.java

package com.example.expandablelistviewtest;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends Activity {

private ExpandableListView listView;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listView = (ExpandableListView) findViewById(R.id.expandableListView1);
listView.setAdapter(new MyAdapter(this));
listView.setOnChildClickListener(new OnChildClickListener() {

@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
Toast.makeText(MainActivity.this, childs[groupPosition][childPosition], Toast.LENGTH_SHORT).show();
return true;
}
});

}

String[] groups ={"好友","親人"};
String[][] childs ={{"好朋友","好基友","好麗友"},{"爺爺奶奶","爸爸媽媽","兄弟姐妹"}};


class MyAdapter extends BaseExpandableListAdapter{


private Context context;
public MyAdapter(Context context){
this.context = context;
}
@Override
public int getGroupCount() {
// TODO Auto-generated method stub
return groups.length;
}

@Override
public int getChildrenCount(int groupPosition) {
// TODO Auto-generated method stub
return childs[groupPosition].length;
}

@Override
public Object getGroup(int groupPosition) {
// TODO Auto-generated method stub
return groups[groupPosition];
}

@Override
public Object getChild(int groupPosition, int childPosition) {
// TODO Auto-generated method stub
return childs[groupPosition][childPosition];
}

@Override
public long getGroupId(int groupPosition) {
// TODO Auto-generated method stub
return groupPosition;
}

@Override
public long getChildId(int groupPosition, int childPosition) {
// TODO Auto-generated method stub
return childPosition;
}

@Override
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
if(convertView==null){
LayoutInflater inflater = LayoutInflater.from(context);
convertView = inflater.inflate(R.layout.group_layout, null);
}
ImageView imageView = (ImageView) convertView.findViewById(R.id.image_view);
TextView textView = (TextView) convertView.findViewById(R.id.text_view);
//imageView.setImageResource();
textView.setText(groups[groupPosition]);
return convertView;
}

@Override
public View getChildView(int groupPosition, int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {

if(convertView==null){
LayoutInflater inflater = LayoutInflater.from(context);
convertView = inflater.inflate(R.layout.child_layout, null);
}
ImageView imageView = (ImageView) convertView.findViewById(R.id.image_view);
TextView textView = (TextView) convertView.findViewById(R.id.text_view);
textView.setText(childs[groupPosition][childPosition]);

return convertView;
}

@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
// TODO Auto-generated method stub
return true;
}
@Override
public boolean hasStableIds() {
// TODO Auto-generated method stub
return false;
}


}

}



2.ImageSwitcher和TextSwitcher_圖文切換

實現步驟:

MainActivity實現ViewFactory接口,重寫makeView方法:創建一個ImageView對象的實例,調用iv的setImageResource方法,返回iv;

onCreate添加代碼:imageSwitcher.setFactory(this);現在只能顯示一張圖片

再實現onTouchListener接口,重寫onTouch方法:在方法外定義兩個float變量:float startX = 0.0f; float endX = 0.0f;在onCreate方法里定義一個索引index;

先在方法里獲取當前的事件動作:int action = event.getAction();再添加if語句:if(action==MotionEvent.ACTION_DOWN){startX = event.getX();}

if(action == MotionEvent.ACTION_UP){endX = event.getX();

if(startX-endX>20//下一張){index = index+1<images.length?++index:0; imageSwticher.setImageResource(image[index];)

else if(endX-startX>20//上一張){index = index-1>=0?--index:images.length-1; imageSwitcher.setImageResource(images[index]); } }

}

采用實現接口監聽事件,要在onCreate里setOnTouchListener(this);

package com.example.imageswitchertest;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;


public class MainActivity extends Activity implements ViewFactory,OnTouchListener{

private ImageSwitcher imageSwitcher;
private int[] images = {R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d};
private int index;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher1);
imageSwitcher.setFactory(this);
imageSwitcher.setOnTouchListener(this);
}

float startX = 0.0f;
float endX = 0.0f;
@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
int action = event.getAction();
if(action==MotionEvent.ACTION_DOWN){
startX = event.getX();
}if(action==MotionEvent.ACTION_UP){
endX = event.getX();
if(endX-startX>20){//上一張
index = index-1>=0?--index:images.length-1;
}else if(startX-endX>20){//下一張
index = index+1<images.length?++index:0;
}
imageSwitcher.setImageResource(images[index]);
}
return true;
}

public View makeView() {
// TODO Auto-generated method stub
ImageView iv = new ImageView(this);
iv.setImageResource(images[0]);
return iv;
}
}



3.ImageSwitcher和TextSwitcher_動畫和文本切換

動畫:在判斷上一張,下一張語句中添加代碼:imageSwitcher.setInAnimation(this, android.R.anim.fade_in);
    imageSwitcher.setOutAnimation(this, android.R.anim.fade_out);


TextSwitcher實現思路同上,只不過是把setImageResource方法換成setText方法


4.ViewFlipper


在添加ViewFlipper布局文件中,直接在viewFlipper中添加幾個布局作為顯示的頁面,添加屬性scaleType="centerCrop"讓圖片更加美觀;

本次直接使用MainActivity下的onTouchEvent()方法

定義動畫

activity_main

<ViewFlipper
android:id="@+id/viewFlipper1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
android:id="@+id/img1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/b" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
android:id="@+id/img2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/c" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
android:id="@+id/img3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/d" />
</LinearLayout>
</ViewFlipper>

MainActivity

package com.example.viewflippertest;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ViewFlipper;


public class MainActivity extends Activity {

private ViewFlipper viewFlipper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper1);

}


float startX,endX;
@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
int action = event.getAction();
if(action==MotionEvent.ACTION_DOWN){
startX = event.getX();
}else if(action==MotionEvent.ACTION_UP){
endX = event.getX();
if(startX>endX){//下一張
viewFlipper.setInAnimation(this,android.R.anim.fade_in);
viewFlipper.setOutAnimation(this,android.R.anim.fade_out);
viewFlipper.showNext();
}else if(startX<endX){//下一張
viewFlipper.setInAnimation(this,android.R.anim.fade_in);
viewFlipper.setOutAnimation(this,android.R.anim.fade_out);
viewFlipper.showPrevious();
}
}
return super.onTouchEvent(event);
}

}


5.Menus_選項菜單

Android 3.0以后推出Action Bar


menu.add()接收4個參數(組ID,當前選項ID,排序,標題)

onOptionsItemSElected()方法先調用item的getItemId方法得到一個int類型id,再使用switch語句分別實現相應菜單選項的邏輯事件


其實還可調用geMenuInflater方法獲取一個菜單填充器,然后自定義menu_main.xml中的配置


6.Menus_上下文菜單

ContextMenu

MainActivity

package com.example.menustest;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.ContextMenu;
import android.view.MenuItem;
import android.view.View;
import android.view.ContextMenu.ContextMenuInfo;
import android.widget.TextView;

public class MainActivity extends Activity {

private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.tv);
registerForContextMenu(textView);
}

@Override
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenuInfo menuInfo) {
super.onCreateContextMenu(menu, v, menuInfo);
getMenuInflater().inflate(R.menu.main, menu);
}

@Override
public boolean onContextItemSelected(MenuItem item) {
// TODO Auto-generated method stub
switch (item.getItemId()) {
case (R.id.red):
textView.setBackgroundColor(Color.RED);
break;
case (R.id.green):
textView.setBackgroundColor(Color.GREEN);
break;
case (R.id.blue):
textView.setBackgroundColor(Color.BLUE);
break;

}

return super.onContextItemSelected(item);
}
}


activity_main.xml

<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.menustest.MainActivity" >

<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="點我變色"
android:gravity="center"/>

</RelativeLayout>


main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.menustest.MainActivity" >

<item
android:id="@+id/red"
android:orderInCategory="100"
android:title="紅色"/>
<item
android:id="@+id/green"
android:orderInCategory="200"
android:title="綠色"/>
<item
android:id="@+id/blue"
android:orderInCategory="300"
android:title="藍色"/>

</menu>



7.Menus_彈出式菜單

實現步驟:

新建一個Button點擊事件,事件里添加以下邏輯:

新建一個PopupMenu實例,參數為this,v;

然后調用getMenuInflater的inflate,參數為menu布局,實例的getMenu()方法;

最后把實例show出來

還可以調用popupMenu的setOnMenuItemClickListener()方法為彈出的選項設置響應的邏輯


MainActivity

package com.example.popupmenutest;

import android.app.Activity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.PopupMenu;
import android.widget.PopupMenu.OnMenuItemClickListener;
import android.widget.Toast;

public class MainActivity extends Activity implements OnMenuItemClickListener{

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

}

public void selectClick(View view) {

PopupMenu popupMenu = new PopupMenu(this, view);
getMenuInflater().inflate(R.menu.main, popupMenu.getMenu());
popupMenu.show();
popupMenu.setOnMenuItemClickListener(this);

}

@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.s:
Toast.makeText(this, "你選擇了S號", Toast.LENGTH_SHORT).show();
break;
case R.id.m:
Toast.makeText(this, "你選擇了M號", Toast.LENGTH_SHORT).show();
break;
case R.id.l:
Toast.makeText(this, "你選擇了L號", Toast.LENGTH_SHORT).show();
break;
}

return true;
}

}



8.ViewPager_基本使用

在這節踩過的坑是新建類繼承PagerAdapter沒有重寫構造方法,為什么視頻里不用寫呢?


MainActivity

package com.example.viewpagertest;

import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {

private ViewPager viewPager;
//private PagerTabStrip pagerTabStrip;
private String[] titles = { "金泰妍1", "金泰妍2", "金泰妍3", "金泰妍4" };
private ArrayList<View> views = new ArrayList<View>();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
//pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);
initViews();
viewPager.setAdapter(new MyPagerAdapter(views));
}


private void initViews() {
views.add(getLayoutInflater().inflate(R.layout.layout_1, null));
views.add(getLayoutInflater().inflate(R.layout.layout_2, null));
views.add(getLayoutInflater().inflate(R.layout.layout_3, null));
views.add(getLayoutInflater().inflate(R.layout.layout_4, null));

}

class MyPagerAdapter extends PagerAdapter {

//視頻里沒有重寫構造方法,不會報錯,eclipse沒有寫就停止運行
private ArrayList<View> views;
public MyPagerAdapter(ArrayList<View> views){
this.views = views;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return views.size();
}

// 實例化選項卡
public Object instantiateItem(ViewGroup container, int position) {
View v = views.get(position);
container.addView(v);
return v;
}

// 刪除選項卡
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));

}

// 判斷視圖是否為返回的對象
public boolean isViewFromObject(View view, Object o) {
// TODO Auto-generated method stub
return view == o;
}

// 獲取標題
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titles[position];
}

}


}



9.ViewPager_屬性配置



10.ViewPager_程序首次啟動引導界面案例




注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com