源码案例下载地址：微信界面的实现就是使用ViewPager控件的特性来实现界面之间的滑动，上一张讲解了实现一个简单ViewPager的案例，今天继续使用ViewPager的特性来实现微信主界面功能，我们都知道微信主界面的结构实际上就是由三部分组成(底部标题栏Title,中间展示界面ViewPager，底部菜单栏)，知道了它的结构，我们发现微信主界面的滑动切换，同时改变了顶部标题栏的类容，中间部分数据展示，顶部菜单也随着切换到对应的菜单，好了不多说：我们还是看代码，既然知道了它的结构，我们为了将顶部和底部的布局实现重用性，我们将它单独定义出来：
首先顶部布局：main_toptitle.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" >
<LinearLayout
android:id="@+id/toptitle"
android:layout_width="fill_parent"
android:layout_height="45dp"
android:gravity="center"
android:background="#ffcccc"
android:orientation="horizontal"
>
<TextView
android:id="@+id/weixintv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:gravity="center"
android:textSize="25sp"
android:textStyle="bold"
android:text="微信"
/>
</LinearLayout>
</LinearLayout>底部菜单布局：bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
>
<LinearLayout
android:id="@+id/weixinlayout"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="@+id/weixinimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_gravity="center_horizontal"
android:background="@drawable/bookmark"
/>
<TextView
android:id="@+id/weixintext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="18sp"
android:textStyle="bold"
android:text="微信"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/weixinfrd"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="@+id/weixinfrdimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_gravity="center_horizontal"
android:background="@drawable/bookmark"
/>
<TextView
android:id="@+id/weixinfrdtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="朋友"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/weixinlin"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="@+id/weixinlinimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_gravity="center_horizontal"
android:background="@drawable/bookmark"
/>
<TextView
android:id="@+id/weixinlintext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="18sp"
android:textStyle="bold"
android:text="通讯录"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/weixinsetting"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageButton
android:id="@+id/weixinsettingimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_gravity="center_horizontal"
android:background="@drawable/bookmark"
/>
<TextView
android:id="@+id/weixinsettext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="18sp"
android:textStyle="bold"
android:text="设置"
/>
</LinearLayout>
</LinearLayout>然后主布局：weixin_main.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="wrap_content"
android:orientation="vertical" >
<include layout="@layout/main_toptitle"/>
<LinearLayout
android:id="@+id/content_lin"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
>
<android.support.v4.view.ViewPager
android:id="@+id/viewpage"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
</LinearLayout>
<include layout="@layout/bottom"/>
</LinearLayout>我们来看一下效果：
我们看到现在主布局中间的内容区域就是一个ViewPager，但是没有任何类容，当我们进入应用时，主布局中间内容首先默认显示的是对应的微信菜单的界面，我们知道它有四个菜单，也就是说有四个子布局，分别对应：微信，朋友，通讯录，设置，接下来我们就定义它的子布局，这里为了节省时间，就只展示一个子布局，另外三个跟它一样，还有一点这里为了区分四个布局内容的不同，我们将在子布局引入不同的类容：
子布局：weixin01.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:gravity="center"
android:orientation="vertical" >
<ListView
android:id="@+id/weixinlist01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:entries="@array/weixinarray"
></ListView>
</LinearLayout>子布局中为了展示类容，我们只放了一个ListView控件，并且为了区分不同的内容，我们分别为其引进了一个默认的数组（android:entries="@array/weixinarray"），好了下面我们就是我们的实现功能代码：
MainActivity.java
package com.weixin.login;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
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.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
import com.view.TestFagment;
import com.weixin.R;
public class MainActivity extends FragmentActivity implements OnClickListener{
private ViewPager mviewpage;
private TextView weixintv;
private LinearLayout mweixin;
private LinearLayout mweixinfrd;
private LinearLayout mweixinlin;
private LinearLayout mweixinsetting;
private LinearLayout contentlin;
private ImageButton mweixinimg;
private ImageButton mweixinfrdimg;
private ImageButton mweixinlinimg;
private ImageButton mweixinsettingimg;
private FragmentManager fragmentManager;
private FragmentTransaction fragmentTransaction;
private ListView lv;
private TestFagment tf;
private List<View> lsview=new ArrayList<View>();
private PagerAdapter viewAdapter;
//private LayoutInflater inflater;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.weixin_main);
fragmentManager=getSupportFragmentManager();
//初始化TabView界面的方法
initView();
//为TabView添加点击事件
initEvents();
}
private void initEvents() {
mweixin.setOnClickListener(this);
mweixinfrd.setOnClickListener(this);
mweixinlin.setOnClickListener(this);
mweixinsetting.setOnClickListener(this);
//要实现ViewPage滑动到不同的界面，对应的图标按钮也随着切换，需实现
//一个监听OnPageChangeListener()
mviewpage.setOnPageChangeListener(new OnPageChangeListener() {
//当选中每个界面时该响应的方法
@Override
public void onPageSelected(int arg0) {
//先获取每个界面，定义一个int类型的变量接收，然后用switch语句判断
int currentItem=mviewpage.getCurrentItem();
//当然再判断之前让所有的图标先变暗，调用图片变暗的方法
resetImg();
switch (currentItem) {
case 0:
{
mweixinimg.setImageResource(R.drawable.bookmark);
weixintv.setText("微信");
}
break;
case 1:
{
mweixinfrdimg.setImageResource(R.drawable.bookmark);
weixintv.setText("朋友");
}
break;
case 2:
{
mweixinlinimg.setImageResource(R.drawable.bookmark);
weixintv.setText("通讯录");
}
break;
case 3:
{
mweixinsettingimg.setImageResource(R.drawable.bookmark);
weixintv.setText("设置");
}
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() {
//ViewPage
mviewpage=(ViewPager) findViewById(R.id.viewpage);
weixintv=(TextView) findViewById(R.id.weixintv);
//Tab
mweixin=(LinearLayout) findViewById(R.id.weixinlayout);
mweixinfrd=(LinearLayout) findViewById(R.id.weixinfrd);
mweixinlin=(LinearLayout) findViewById(R.id.weixinlin);
mweixinsetting=(LinearLayout) findViewById(R.id.weixinsetting);
contentlin=(LinearLayout) findViewById(R.id.content_lin);
//ImageButton
mweixinimg=(ImageButton) findViewById(R.id.weixinimg);
mweixinfrdimg=(ImageButton) findViewById(R.id.weixinfrdimg);
mweixinlinimg=(ImageButton) findViewById(R.id.weixinlinimg);
mweixinsettingimg=(ImageButton) findViewById(R.id.weixinsettingimg);
LayoutInflater inflater=LayoutInflater.from(this);
View view01=inflater.inflate(R.layout.weixin01, null);
View view02=inflater.inflate(R.layout.weixin02, null);
View view03=inflater.inflate(R.layout.weixin03, null);
View view04=inflater.inflate(R.layout.weixin04, null);
lsview.add(view01);
lsview.add(view02);
lsview.add(view03);
lsview.add(view04);
//创建适配器
viewAdapter=new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return lsview.size();
}
//创建这个适配器时，除了要强制重写以上两个方法外，还得重写一下两个方法
//这个方法是摧毁view
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
/*******************************************
//要摧毁view，首先得获取每个view对象
View view=lsview.get(position);
//然后摧毁view调用它的removeAllViews()方法
container.removeAllViews();
**********************************************/
container.removeView(lsview.get(position));
}
//这个方法是初始化view
@Override
public Object instantiateItem(ViewGroup container, int position) {
//需获取每个view
View view=lsview.get(position);
//然后将所有的view添加到ViewGroup这个存放view的容器中
container.addView(view);
//然后返回view
return view;
}
};
//给view添加适配器
mviewpage.setAdapter(viewAdapter);
}
@Override
public void onClick(View arg0) {
//这个方法是让页面加载出来之后，界面上的所有图标都是暗的
resetImg();
//contentlin.removeView(mviewpage);
switch (arg0.getId()) {
case R.id.weixinlayout://微信的点击事件
{
//final String[] array=getResources().getStringArray(R.array.weixinarray);
mviewpage.setCurrentItem(0);
/*************************************************************
View view=lsview.get(0);
lv=(ListView) view.findViewById(R.id.weixinlist01);
lv.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1,
int arg2, long arg3) {
String s=array[arg2];
Toast.makeText(MainActivity.this, s, 4).show();
fragmentTransaction=fragmentManager.beginTransaction();
if(tf==null){
tf=new TestFagment();
fragmentTransaction.replace(R.id.content_lin, tf);
}else{
fragmentTransaction.show(tf);
}
fragmentTransaction.commit();
}
});
**************************************************************/
mweixinimg.setImageResource(R.drawable.bookmark);
weixintv.setText("微信");
}
break;
case R.id.weixinfrd://朋友的点击事件
{
mviewpage.setCurrentItem(1);
mweixinfrdimg.setImageResource(R.drawable.bookmark);
weixintv.setText("朋友");
}
break;
case R.id.weixinlin://通讯录的点击事件
{
mviewpage.setCurrentItem(2);
mweixinlinimg.setImageResource(R.drawable.bookmark);
weixintv.setText("通讯录");
}
break;
case R.id.weixinsetting://设置的点击事件
{
mviewpage.setCurrentItem(3);
mweixinsettingimg.setImageResource(R.drawable.bookmark);
weixintv.setText("设置");
}
break;
default:
break;
}
}
private void resetImg() {
//利用不同的图片来动态改变图片的颜色（这里没有图片设置）
mweixinimg.setImageResource(R.drawable.bookmark);
mweixinfrdimg.setImageResource(R.drawable.bookmark);
mweixinlinimg.setImageResource(R.drawable.bookmark);
mweixinsettingimg.setImageResource(R.drawable.bookmark);
//利用图片的背景颜色设置来动态改变点击图片的颜色变换
// mweixinimg.setBackgroundColor(Color.BLUE);
// mweixinfrdimg.setBackgroundColor(Color.BLUE);
// mweixinlinimg.setBackgroundColor(Color.BLUE);
// mweixinsettingimg.setBackgroundColor(Color.BLUE);
}
}好了全部的代码已经写完了，具体的可以看一下代码的注释，到这里微信主界面我们就实现了
源码案例下载地址：http://download.csdn.net/detail/symahll2011/8879035
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
