Android仿微信界面--使用viewpager實現(慕課網筆記)

來自慕課網：http://www.imooc.com/video/5901
先來看效果：

具體實現
1 新建頂部佈局文件top.xml

<?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="45dp"
    android:gravity="center"
    android:background="@drawable/title_bar"
    android:orientation="vertical" >
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textSize="20sp"
        android:layout_gravity="center"
        android:textColor="#ffffff"
        android:textStyle="bold"/>

</LinearLayout>

效果如下：

2 新建底部佈局文件bottom.xml，底部佈局包括一個橫向的LinearLayout，其中又包括4個豎向的LinearLayout，每個中包括一個ImageButton和一個TextView。每個豎向的LinearLayout設置其寬度爲0，layout_weight 爲1，表示4個共同均分屏幕寬度。在設置Layout_weight的時候最好將寬度或高度設置爲0，Layout_weight平分的是屏幕剩餘的寬度或高度。

<?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="55dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal" >
    <LinearLayout 
        android:id="@+id/id_tab_weixin"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1">
        <ImageButton 
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_weixin_pressed"
            android:background="#00000000"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="微信"/>
    </LinearLayout>
    <LinearLayout 
        android:id="@+id/id_tab_frd"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1">
        <ImageButton 
            android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_find_frd_normal"
            android:background="#00000000"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="朋友"/>
    </LinearLayout>
    <LinearLayout 
        android:id="@+id/id_tab_address"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1">
        <ImageButton 
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_address_normal"
            android:background="#00000000"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="通訊錄"/>
    </LinearLayout>
    <LinearLayout 
        android:id="@+id/id_tab_setting"
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1">
        <ImageButton 
            android:id="@+id/id_tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_settings_normal"
            android:background="#00000000"/>
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="設置"/>
    </LinearLayout>

</LinearLayout>

效果圖如下：

3 現在進行主佈局的設置activity_main.xml，在這裏引入我們設定好的兩個佈局top.xml和bottom.xml。然後在top和bottom之間寫入viewpager，設置其高度爲0，layout_weight爲1，就表示viewpager佔據了除了top,bottom之外屏幕的剩餘空間。

<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"
    >

   <include layout="@layout/top"/>
    <android.support.v4.view.ViewPager
        android:id="@id/id_viewpager"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">

    </android.support.v4.view.ViewPager>
   <include layout="@layout/bottom"/>

</LinearLayout>

4 添加4個佈局，微信，朋友，通信錄，設置分別對應的佈局tab01.xml,tab02.xml,tab03.xml,tab04.xml
tab01.xml

<?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"
    android:orientation="vertical" >
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="這是微信聊天界面"
        android:textSize="40sp"
        android:textStyle="bold"
        android:gravity="center"/>

</LinearLayout>

tab02.xml

<?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"
    android:orientation="vertical" >
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="40sp"
        android:textStyle="bold"
        android:text="這是朋友界面"
        android:gravity="center"/>

</LinearLayout>

tab03.xml

<?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"
    android:orientation="vertical" >
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="40sp"
        android:textStyle="bold"
        android:text="這是通訊錄界面"
        android:gravity="center"/>

</LinearLayout>

tab04.xml

<?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"
    android:orientation="vertical" >
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="40sp"
        android:textStyle="bold"
        android:text="這是設置界面"
        android:gravity="center"/>

</LinearLayout>

5 MainActivity.java

package com.example.imooc_weixin;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener{
    private ViewPager mViewPager;
    private PagerAdapter mAdapter;
    private List<View> mViews = new ArrayList<View>();//保存微信，朋友，通訊錄，設置4個界面的view
    //底部的四個tab按鈕，微信，朋友，通訊錄，設置
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        initEvents();
    }

    private void initEvents() {
        //給底部的4個LinearLayout即4個導航控件添加點擊事件
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
        //viewpager滑動事件
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {//當viewpager滑動時，對應的底部導航按鈕的圖片要變化
                int currentItem = mViewPager.getCurrentItem();
                resetImg();
                switch (currentItem) {
                case 0:
                    mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                    break;
                case 1:
                    mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                    break;
                case 2:
                    mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                    break;
                case 3:
                    mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                    break;

                default:
                    break;
                }
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }

    private void initView() {//初始化所有的view
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        //tabs
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
        //imagebutton
        mWeixinImg = (ImageButton)findViewById(R.id.id_tab_weixin_img);
        mFrdImg = (ImageButton)findViewById(R.id.id_tab_frd_img);
        mAddressImg = (ImageButton)findViewById(R.id.id_tab_address_img);
        mSettingImg = (ImageButton)findViewById(R.id.id_tab_setting_img);
        //通過LayoutInflater引入佈局，並將佈局轉化爲view
        LayoutInflater mInflater = LayoutInflater.from(this);//創建一個LayoutInflater對象
        View tab01 = mInflater.inflate(R.layout.tab01, null);//通過inflate方法動態加載一個佈局文件
        View tab02 = mInflater.inflate(R.layout.tab02, null);
        View tab03 = mInflater.inflate(R.layout.tab03, null);
        View tab04 = mInflater.inflate(R.layout.tab04, null);
        mViews.add(tab01);
        mViews.add(tab02);
        mViews.add(tab03);
        mViews.add(tab04);
        //初始化PagerAdapter
        mAdapter = new PagerAdapter() {


            @Override
            public void destroyItem(ViewGroup container, int position,
                    Object object) {
                // TODO Auto-generated method stub
                container.removeView(mViews.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view = mViews.get(position);//從mViews這個list中根據位置取出我們需要的view
                container.addView(view);//將上述的view添加到ViewGroup中
                return view;
            }

            /*
             * isViewFromObject用來判斷instantiateItem(ViewGroup, int)函數所返回來的Key與一個頁面視圖是否是代表
             * 的同一個視圖(即它倆是否是對應的，對應的表示同一個View),如果對應的是同一個View，返回True，否則返回False
             * */
            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                // TODO Auto-generated method stub
                return arg0 == arg1;
            }

            @Override
            public int getCount() {
                // 返回PagerView包含的view的個數
                return mViews.size();
            }
        };
        //爲ViewPager設置adapter
        mViewPager.setAdapter(mAdapter);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onClick(View v) {
        resetImg();//點擊哪個tab,對應的顏色要變亮，因此，在點擊具體的tab之前先將所有的圖片都重置爲未點擊的狀態，即暗色圖片
        switch (v.getId()) {
        case R.id.id_tab_weixin:
            mViewPager.setCurrentItem(0);//如果點擊的是微信，就將viewpager的當前item設置爲0，及切換到微信聊天的viewpager界面
            mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);//並將按鈕顏色點亮
            break;
        case R.id.id_tab_frd:
            mViewPager.setCurrentItem(1);   
            mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case R.id.id_tab_address:
            mViewPager.setCurrentItem(2);
            mAddressImg.setImageResource(R.drawable.tab_address_pressed);
            break;
        case R.id.id_tab_setting:
            mViewPager.setCurrentItem(3);
            mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
            break;

        default:
            break;
        }

    }
    /*
     * 將所有的圖片設置爲暗色
     * */
    private void resetImg() {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingImg.setImageResource(R.drawable.tab_settings_normal);

    }
}

至此，程序運行效果如下：

但是此時程序還有一個問題，主要就是點擊底部導航欄的4個LinearLayout時，如果點擊按鈕圖片，程序沒有反應，只有點擊下面的文字時纔有效果。問題在於點擊LinearLayout時，他會把監聽事件先交給ImageButton，因爲它是可以點擊的，而ImageButton中未實現監聽器，所以不能響應。解決方法就是設置ImageButton不能被點擊。在XML文件中，給Imagebutton添加android:clickable=”false”屬性即可。
源代碼在這裏：http://download.csdn.net/detail/hnyzwtf/9352369

Android仿微信界面--使用viewpager實現(慕課網筆記)

c#讀取dbf文件並輸出某一列

Android-Layout_weight屬性解析(慕課網筆記)

轉載：Java使用dom4j解析XML

win7 64位下VS2010和opencv 2.4.11的配置

Android仿微信界面--使用viewpager實現(慕課網筆記)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結