Android 底部TabActivity（3）——ActivityGroup|顶部底部均有Tab标签之二

最新推荐文章于 2016-09-06 21:25:42 发布

转载最新推荐文章于 2016-09-06 21:25:42 发布 · 490 阅读

android进阶专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一种在Android应用中实现底部带图标的Tab栏的方法。通过使用GridView和自定义适配器来展示Tab项，包括主页、订单和钱包等选项。此方案适用于希望在页面底部添加美观Tab栏的应用。

http://blog.youkuaiyun.com/geofferysun/article/details/41852605

上一篇使用过时的ActivityGroup简单实现了顶部底部均有Tab标签的效果，是页面底部只有文字的样式，今天想完善一下效果，底部实现文字加图标的样式。

本文属于半成品，本来想着放弃的，想着先放博客吧，好歹也是一种思路，以后作参考用！追求完美效果的可以忽略本篇，我会在后续文章中实现更优的效果！

先看下效果图

首先是主页面MainActivity.java，这种方式其实不是真正意义上的Tab，只是实现了这样的效果。底部用了GridView实现三个切换开关，放到页面底部。

[java]view plaincopy 
   
 package sun.geoffery.tabtopbottom;  
   
 import android.app.ActivityGroup;  
 import android.content.Intent;  
 import android.os.Bundle;  
 import android.os.Handler;  
 import android.os.Message;  
 import android.view.MotionEvent;  
 import android.view.View;  
 import android.view.View.OnTouchListener;  
 import android.view.Window;  
 import android.widget.AdapterView;  
 import android.widget.AdapterView.OnItemClickListener;  
 import android.widget.GridView;  
 import android.widget.LinearLayout;  
 import android.widget.LinearLayout.LayoutParams;  
   
 /** 
  * All rights Reserved, Designed By GeofferySun 
  *  
  * @Title: MainActivity.java 
  * @Package sun.geoffery.tabtopbottom 
  * @Description:上下都有Tab的界面 
  * @author: GeofferySun 
  * @date: 2014-12-9 下午3:41:04 
  * @version V1.0 
  */  
 public class MainActivity extends ActivityGroup {  
       
     public static Class mTabClassAry[]= {   
         HomeActivity.class,  
         OrderActivity.class,  
         WalletActivity.class};  
     public static String mTabTxtAry[] = {"主页", "订单", "钱包"};  
     public static int mTabImgAry[] = {  
         R.drawable.ic_launcher,  
         R.drawable.ic_launcher,  
         R.drawable.ic_launcher};  
       
     private int mCurTab;  
     private final static int FLAG_EVENT = 0X100;  
     private GridView mTabGridView;  
     private GridViewAdapter mTabAdapter;  
     private LinearLayout mContainer; // 装载sub Activity的容器  
   
     public void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
           
         requestWindowFeature(Window.FEATURE_NO_TITLE);  
         setContentView(R.layout.activity_main);  
   
         initView();  
     }  
   
     private void initView() {  
         mContainer = (LinearLayout) findViewById(R.id.Container);  
         mTabGridView = (GridView) findViewById(R.id.bottom_tab);  
         // 禁止GridView滚动  
         mTabGridView.setOnTouchListener(new OnTouchListener() {  
             @Override  
             public boolean onTouch(View v, MotionEvent event) {  
                 return MotionEvent.ACTION_MOVE == event.getAction() ? true : false;  
             }  
         });  
   
         mTabAdapter = new GridViewAdapter(this, mTabImgAry, mTabTxtAry);  
         mTabGridView.setAdapter(mTabAdapter);  
         mTabGridView.setOnItemClickListener(new OnItemClickListener() {  
   
             @Override  
             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
                 switchActivity(position);  
             }  
         });  
   
         mCurTab = -1;  
         mHandler.sendEmptyMessageDelayed(FLAG_EVENT, 100);  
     }  
       
     Handler mHandler = new Handler() {  
   
         @Override  
         public void handleMessage(Message msg) {  
             switch (msg.what) {  
             case FLAG_EVENT:  
                 switchActivity(0);  
                 break;  
             }  
         }  
   
     };  
   
     private void switchActivity(int index) {  
         if (index < 0 || index >= mTabClassAry.length) {  
             return;  
         }  
   
         if (mCurTab == index) {  
             return;  
         }  
   
         if (mCurTab != -1) {  
             mTabGridView.getChildAt(mCurTab).setBackgroundDrawable(null);  
         }  
           
 //      mTabGridView.getChildAt(index).setBackgroundResource(R.drawable.tab_item_d);  
           
         mCurTab = index;  
   
         mContainer.removeAllViews();  
         Intent intent = new Intent(this, mTabClassAry[index]);  
   
         String name = index + " subactivity";  
         // Activity 转为 View  
         Window subActivity = getLocalActivityManager().startActivity(name, intent);  
   
         View child = subActivity.getDecorView();  
         LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);  
         child.setLayoutParams(params);  
         // 容器添加View  
         mContainer.addView(child);  
     }  
 }  

主页面对应的页面文件

[html]view plaincopy 
   
 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:layout_width="fill_parent"  
     android:layout_height="fill_parent" >  
   
     <LinearLayout  
         android:id="@+id/Container"  
         android:layout_width="fill_parent"  
         android:layout_height="fill_parent"  
         android:orientation="horizontal"  
         android:layout_above="@+id/bottom_tab" />  
   
     <GridView  
         android:id="@+id/bottom_tab"  
         android:layout_width="fill_parent"  
         android:layout_height="wrap_content"  
         android:layout_alignParentBottom="true"  
         android:background="#404040"  
         android:listSelector="@android:color/transparent"  
         android:numColumns="3"  
         android:padding="2dp" />  
   
 </RelativeLayout>  

底部的GridView需要一个适配器GridViewAdapter.java，Item就是上边一个图标、下边一个文字。

[java]view plaincopy 
   
 </pre><pre name="code" class="java">package sun.geoffery.tabtopbottom;  
   
 import android.content.Context;  
 import android.view.LayoutInflater;  
 import android.view.View;  
 import android.view.ViewGroup;  
 import android.widget.BaseAdapter;  
 import android.widget.ImageView;  
 import android.widget.TextView;  
   
 public class GridViewAdapter extends BaseAdapter {  
     Context mContext;  
     LayoutInflater mLayoutInflater;  
     int mImageviewArray[];  
     String mTextViewArray[];  
   
     public GridViewAdapter(Context context, int imageViewArray[], String textViewArray[]) {  
   
         mContext = context;  
         mLayoutInflater = LayoutInflater.from(context);  
         mImageviewArray = imageViewArray;  
         mTextViewArray = textViewArray;  
     }  
   
     @Override  
     public Object getItem(int position) {  
         return position;  
     }  
   
     @Override  
     public long getItemId(int position) {  
         return position;  
     }  
   
     @Override  
     public View getView(int position, View convertView, ViewGroup parent) {  
   
         if (convertView == null) {  
             convertView = mLayoutInflater.inflate(R.layout.tab_item_view, null);  
         }  
   
         ImageView imageView = (ImageView) convertView  
                 .findViewById(R.id.imageview);  
         imageView.setBackgroundResource(mImageviewArray[position]);  
   
         TextView textView = (TextView) convertView.findViewById(R.id.textview);  
         textView.setText(mTextViewArray[position]);  
   
         return convertView;  
   
     }  
   
     @Override  
     public int getCount() {  
         return mImageviewArray.length;  
     }  
   
 }  

每个Item对应的布局文件tab_item_view.xml如下

[html]view plaincopy 
   
 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:gravity="center"  
     android:orientation="vertical" >  
   
     <ImageView  
         android:id="@+id/imageview"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:focusable="false"  
         android:padding="3dp" >  
     </ImageView>  
   
     <TextView  
         android:id="@+id/textview"  
         style="@style/tab_item_text_style"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content" >  
     </TextView>  
   
 </LinearLayout>  