Android UI开发篇之 ViewPager+九宫格布局实现左右滑动

分类：Android 2013-12-15 17:31 2542人阅读评论(4) 收藏举报 android UI ViewPager 九宫布局

首先看下UI效果：

Android UI开发篇之 ViewPager+九宫格布局实现左右滑动_第1张图片

这个是我在业余开发的新浪微博广场模块的一个实现页面左右滑动的效果，用到的有android.support.v4.view.ViewPager 实现页面切换+GridView 的九宫格布局。

下面直接贴代码：

1、/WeiBo_ice/res/layout/search_title.xml < 广场标题布局>

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/search_title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/titlebar_bg">
<TextViewandroid:id="@+id/tv_search_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:text="@string/tabbar_square"
android:textSize="@dimen/title_text_size"
android:textColor="@color/title_text_color"/>
<FrameLayoutandroid:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical">
<ProgressBarandroid:id="@+id/titleprogressBar"
style="@android:attr/progressBarStyleLarge"
android:layout_width="30dip"
android:layout_height="30dip"
android:visibility="gone"/>
<ImageViewandroid:id="@+id/title_bt_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/empty"/>
</FrameLayout>
</FrameLayout>

2、/WeiBo_ice/res/layout/searchinfo.xml

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/search_title_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<includeandroid:id="@+id/title"
layout="@layout/search_title"
/>
<FrameLayoutandroid:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/search_viewpager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
</android.support.v4.view.ViewPager>
<RelativeLayoutandroid:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:id="@+id/llguid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/guide_round"
android:clickable="true"
android:layout_margin="8dp"
android:contentDescription="@string/empty"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/guide_round"
android:clickable="true"
android:layout_margin="8dp"
android:contentDescription="@string/empty"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/guide_round"
android:clickable="true"
android:layout_margin="8dp"
android:contentDescription="@string/empty"
/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
</LinearLayout>

3、/WeiBo_ice/res/layout/ninebox.xml <九宫格布局文件>,共有三个页面切换、所有三个layout 九宫格布局文件<ninebox_2.xml,ninebox_3.xml>、内容相似，这里就只贴出一个。

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<GridView
android:id="@+id/myGridView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="3"
android:verticalSpacing="15dip"
android:horizontalSpacing="6dip"
android:stretchMode="columnWidth"
android:layout_marginTop="20dp"
android:gravity="center">
</GridView>
</LinearLayout>

4、/WeiBo_ice/res/layout/ninebox_item.xml 九宫格内每一个格的布局< 包含图片和文字显示>

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageViewandroid:id="@+id/ItemImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/empty"
android:layout_gravity="center"/>
<TextViewandroid:id="@+id/itemTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textIsSelectable="false"
android:layout_gravity="center"
android:gravity="center"/>
</LinearLayout>

5、/WeiBo_ice/src/com/ice/weibo/activity/DiscoveActivity.java

[java] view plain copy

packagecom.ice.weibo.activity;
importjava.util.ArrayList;
importjava.util.HashMap;
importjava.util.List;
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.support.v4.view.PagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.OnPageChangeListener;
importandroid.util.Log;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.GridView;
importandroid.widget.ImageView;
importandroid.widget.LinearLayout;
importandroid.widget.SimpleAdapter;
importcom.ice.weibo.R;
importcom.ice.weibo.util.ConstantS;
/**
*广场UI
*@authorice
*
*/
publicclassDiscoveActivityextendsActivity{
privateViewPagermViewPager;
privateLinearLayoutll_1,ll_2,ll_3;
privateGridViewview1,view2,view3;
privateList<View>viewList;//把需要滑动的页卡添加到这个list中
privateImageView[]imageViews;
privateintcurrentPosition=0;//当前位置
/*
*这里我就偷懒啦、三个切换滑动页面引用的是相同的图标和文字、我就省了去找其他的图片啦
*我们可以定义三组数组分别放每个界面的图标和文字内容、
*然后修改下下面的setGridViewAdapter()方法就行啦...
*
*/
//定义图标数组
privateint[]imageRes={R.drawable.nine_1,R.drawable.nine_2,R.drawable.nine_3,
R.drawable.nine_4,R.drawable.nine_5,R.drawable.nine_6,
R.drawable.nine_7,R.drawable.nine_8,R.drawable.nine_9};
//定义标题数组
privateString[]itemName={"微信","微音乐","微魅儿",
"微通讯","微短信","微烦皂",
"微盟主","微爱心","微互粉"
};
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.searchinfo);
initViews();
Log.d(ConstantS.TAG,"currentPosition:"+currentPosition++);
}
publicvoidinitViews(){
mViewPager=(ViewPager)findViewById(R.id.search_viewpager);
LayoutInflaterlf=getLayoutInflater().from(this);
ll_1=(LinearLayout)lf.inflate(R.layout.ninebox,null);
view1=(GridView)ll_1.findViewById(R.id.myGridView);
ll_2=(LinearLayout)lf.inflate(R.layout.ninebox_2,null);
view2=(GridView)ll_2.findViewById(R.id.myGridView2);
ll_3=(LinearLayout)lf.inflate(R.layout.ninebox_3,null);
view3=(GridView)ll_3.findViewById(R.id.myGridView3);
viewList=newArrayList<View>();//将要分页显示的View装入数组中
viewList.add(ll_1);
viewList.add(ll_2);
viewList.add(ll_3);
setGridViewAdapter(view1);
setGridViewAdapter(view2);
setGridViewAdapter(view3);
mViewPager.setAdapter(newMyPagerAdapter(viewList));
mViewPager.setOnPageChangeListener(newmyOnPageChangeListener());
LinearLayoutllguid=(LinearLayout)findViewById(R.id.llguid);
imageViews=newImageView[viewList.size()];
for(inti=0;i<viewList.size();i++){
imageViews[i]=(ImageView)llguid.getChildAt(i);
imageViews[i].setEnabled(true);
imageViews[i].setTag(i);
}
imageViews[currentPosition].setEnabled(false);
}
/**
*设置GridView适配器
*/
privatevoidsetGridViewAdapter(GridViewmGridView){
List<HashMap<String,Object>>data=newArrayList<HashMap<String,Object>>();
intlength=itemName.length;
for(inti=0;i<length;i++){
HashMap<String,Object>map=newHashMap<String,Object>();
map.put("ItemImageView",imageRes[i]);
map.put("ItemTextView",itemName[i]);
data.add(map);
}
SimpleAdaptersimpleAdapter=newSimpleAdapter(this,
data,
R.layout.ninebox_item,
newString[]{"ItemImageView","ItemTextView"},
newint[]{R.id.ItemImageView,R.id.itemTextView});
mGridView.setAdapter(simpleAdapter);
}
classMyPagerAdapterextendsPagerAdapter{
List<View>viewList;
publicMyPagerAdapter(List<View>viewList){
this.viewList=viewList;
}
@Override
publicintgetCount(){
//TODOAuto-generatedmethodstub
returnviewList.size();
}
@Override
publicbooleanisViewFromObject(Viewarg0,Objectarg1){
//TODOAuto-generatedmethodstub
returnarg0==arg1;
}
@Override
publicvoiddestroyItem(Viewcontainer,intposition,Objectobject){
//TODOAuto-generatedmethodstub
((ViewPager)container).removeView(viewList.get(position));
}
@Override
publicObjectinstantiateItem(ViewGroupcontainer,intposition){
//TODOAuto-generatedmethodstub
container.addView(viewList.get(position));
//Log.d(ConstantS.TAG,"ViewPager--Position:"+position);
returnviewList.get(position);
}
}
classmyOnPageChangeListenerimplementsOnPageChangeListener{
/**
*当滑动状态改变时调用
*/
@Override
publicvoidonPageScrollStateChanged(intarg0){
//TODOAuto-generatedmethodstub
}
/**
*当当前页面被滑动时调用
*/
@Override
publicvoidonPageScrolled(intarg0,floatarg1,intarg2){
//TODOAuto-generatedmethodstub
}
/**
*当新的页面被选中时调用
*/
@Override
publicvoidonPageSelected(intarg0){
Log.d(ConstantS.TAG,"ViewPager--当前是第几页:"+arg0);
for(inti=0;i<imageViews.length;i++){
if(i==arg0){
imageViews[arg0].setEnabled(true);
}else{
imageViews[i].setEnabled(false);
}
}
}
}
}

6、/WeiBo_ice/res/drawable-mdpi/guide_round.xml 这个是控制界面切换时下面三个向导的小圆图标的显示效果。< 在searchinfo.xml 中有被引用>

[html] view plain copy

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_enabled="true"android:drawable="@drawable/guide_round_current"></item>
<itemandroid:state_enabled="false"android:drawable="@drawable/guide_round_default"></item>
</selector>

Android UI开发篇之 ViewPager+九宫格布局实现左右滑动

Android UI开发篇之 ViewPager+九宫格布局实现左右滑动

更多相关文章

随机推荐

Android UI开发篇之 ViewPager+九宫格布局 实现左右滑动

Android UI开发篇之 ViewPager+九宫格布局 实现左右滑动

更多相关文章

随机推荐

Android UI开发篇之 ViewPager+九宫格布局实现左右滑动

Android UI开发篇之 ViewPager+九宫格布局实现左右滑动