今天我们要实现一个类似微信界面的布局。
那么我给这个界面分成三个部分,上,中,下,那么久分别给上,下分别设置一个布局,为tob_bar和bottom_bar,那么先建一个顶部布局,代码为:
<?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"> <TextView android:layout_width="match_parent" android:layout_height="50dp" android:gravity="center" android:paddingLeft="20dp" android:text="微信" android:textColor="#aeaeae" android:textSize="20dp" android:background="#4f3978"/> </LinearLayout>
再建一个底部的布局文件,代码为:
<?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="horizontal" android:background="#ce293c"> <LinearLayout android:id="@+id/first1_1" android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center"> <ImageButton android:id="@+id/first1_2" android:layout_width="40dp" android:layout_height="40dp" android:clickable="false" android:background="@drawable/homepagenormal"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="首页" android:textColor="#d46aa6" android:textSize="15dp"/> </LinearLayout> <LinearLayout android:id="@+id/first2_1" android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/first2_2" android:layout_width="40dp" android:layout_height="40dp" android:clickable="false" android:background="@drawable/compliantnormal"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="好友" android:textColor="#d46aa6" android:textSize="15dp"/> </LinearLayout> <LinearLayout android:id="@+id/first3_1" android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/first3_2" android:layout_width="40dp" android:layout_height="40dp" android:clickable="false" android:background="@drawable/signinnormal"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="个人" android:textColor="#d46aa6" android:textSize="15dp"/> </LinearLayout> </LinearLayout>其实很简单,就是三个LinearLayout里面分别放了一个ImageButton和一个TextView,主要作用就是让底部看起来有文字有图标,好看一点。接下来我们要再建一个主布局了,有人问不是还少一个中间的布局吗?不要急嘛,等下会加进去的,主布局代码为:
<?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"> <include layout="@layout/tob_bar" /> <android.support.v4.view.ViewPager android:id="@+id/fragment" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="0dp"> </android.support.v4.view.ViewPager> <include layout="@layout/bottom_bar" /> </LinearLayout>注意这里我们用了一个android.support.v4.view.ViewPager
来当中间的布局,但是没内容啊,我们等下会在主函数里面添加的。
然后都写好了,我们可以写主函数了。主函数代码我们会一点一点讲解的,免得小伙伴一下子看到太多就没胃口看了。
先写个头部,代码是:
public class MainActivity extends FragmentActivity{@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_activity); }}
这几行代码相比大家是知道的,为了能够控制到布局底部布局里面的三个LinearLayout和ImageButton,我们都分别设置了id,那么我们这里就可以引用,那么引用的代码就是:
private ViewPager viewpager; private FragmentPagerAdapter madapter;为了简单我用数字代替了,不过也是比较好理解的,这里也初始化了ViewPager,因为等下要用,mView用来盛装几个中间布局用的,还有一个madepter,是一个适配器,用来适配ViewPager的,等下也要用。接下来引用,代码为:private List<View> mView;private LinearLayout First1_1; private LinearLayout First2_1; private LinearLayout First3_1; private ImageButton First1_2; private ImageButton First2_2; private ImageButton First3_2;
First1_1 = (LinearLayout)findViewById(R.id.first1_1); First2_1 = (LinearLayout)findViewById(R.id.first2_1); First3_1 = (LinearLayout)findViewById(R.id.first3_1); First1_2 = (ImageButton)findViewById(R.id.first1_2); First2_2 = (ImageButton)findViewById(R.id.first2_2); First3_2 = (ImageButton)findViewById(R.id.first3_2); viewpager = (ViewPager)findViewById(R.id.fragment);这里大家也能看得懂吧,那么接着往下讲,讲到这里我们发现中间的布局还是没说到啊,那么这里我们就写一下吧,写好三个中间布局的代码:
<?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"> <TextView android:layout_width="match_parent" android:layout_height="160dp" android:text="XX" android:textSize="25dp" android:gravity="center" android:textColor="#160943" android:background="#d2d2d2"/> </LinearLayout>三个布局都差不多,只要改掉XX部分就可以了,并且给每个布局加上id,以便我们接下来的引用。那么我们在主布局里面怎加载呢?利用以下代码:LayoutInflater minflater = LayoutInflater.from(this); View tab1 = minflater.inflate(R.id.tab1, null); View tab2 = minflater.inflate(R.id.tab2, null); View tab3 = minflater.inflate(R.id.tab3, null);这样就可以了,然后添加进mView中,之前已经声明了,代码:mView.add(tab1);mView.add(tab2);mView.add(tab3);然后我们初始化适配器,以便将这些中间布局放进ViewPager中,代码:madapter = new PagerAdapter(){@Overridepublic void destroyItem(ViewGroup container, int position)
{container.removeView(mView.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position){return container.addView(mView.get(position));}@Overridepublic boolean isViewFromObject(View arg0, Object arg1){return arg0 == arg1;
}@Overridepublic int getCount(){return mView.size();}}重写了四个方法,分别有添加View,删除View,得到View的个数和一个固定的写法,然后写好了适配器,就传给viewpager就行了,代码:viewpager.setAdapter(madapter);不过要注意的是这些初始化我们需要放到一个初始化方法里,用iniview代替,并放置在onCreate下面。
写到这里其实我们就完成了中间的布局设置,此时我们是可以运行程序的,但是我们发现运动中间的布局,底部的布局是不会有任何改变的,那么我们要做的就是把二者之间联系起来。那么接下来我们就应该设置点击事件了,也用方法包起来,名叫initEvent,然后在代码写:private void initEvent() { First1_1.setOnClickListener(new click()); First2_1.setOnClickListener(new click()); First3_1.setOnClickListener(new click());}然后重写onClick方法,代码:public void click(){@Overridepublic void onClick(View v){
switch(v.getId())
{
case R.id.first1_1: viewpager.setCurrentItem(0); First1_2.setImageResourse(R.id.X); break;
case R.id.first2_1: vewipager.setCurrentItem(1); First2_2.setImageResourse(R.id.X); break;
case R.id.first3_1: viewpager.setCurrentItem(2); First3_2.setImageResourse(R.id.X); break;
default : break;
}
}}到这里其实我们就完成了点击按钮切换中间布局的效果,但是为了让用户能清晰的看出来当前是哪个页面,我们给底部布局的几个ImageButton都设置了两个图片,一个是彩色,一个是暗色,就为了实现,点击哪个按钮哪个按钮就亮,其他暗的效果,所以我们添加了一个resetImg()方法在最前面,代码:public void resetImg(){First1_2.setImageResourse(R.drawable.X);First2_2.setImageResourse(R.drawable.X);First3_2.setImageResourse(R.drawable.X);}我们注意到click的代码里面和这里都有相同的代码,其实前面的是用来显示亮的图片,这里是显示暗的图片的。到这里我们是不是就结束了呢?不是,我们只实现了点击更换中间布局的效果,却还没有实现切换中间布局实现更改下面按钮亮暗的效果,那么就必须给viewpager设置一个监听,代码:viewpager.setOnPageChangeListener(new OnPagerChangeListener(){@Override
public void onPageSelected(int arg0)
{
int currentItem = mViewPager.getCurrentItem();
resetImg();
switch (currentItem)
{
case 0:
First1_2.setImageResource(R.drawable.X);
break;
case 1:
First2_2.setImageResource(R.drawable.X);
break;
case 2:
First3_2.setImageResource(R.drawable.X);
break;
}} @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) {});至此我们的任务全部完成了,有学会的同学吗。最后给出全部的主函数的代码,变量上有出入,但是更改一下就可以了。package com.imooc.tab01; 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.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>(); // 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() { mTabWeixin.setOnClickListener(this); mTabFrd.setOnClickListener(this); mTabAddress.setOnClickListener(this); mTabSetting.setOnClickListener(this); mViewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { 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; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); } private void initView() { 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_settings); // 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_settings_img); LayoutInflater mInflater = LayoutInflater.from(this); View tab01 = mInflater.inflate(R.layout.tab01, null); 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); mAdapter = new PagerAdapter() { @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mViews.get(position)); } @Override public Object instantiateItem(ViewGroup container, int position) { View view = mViews.get(position); container.addView(view); return view; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public int getCount() { return mViews.size(); } }; mViewPager.setAdapter(mAdapter); } @Override public void onClick(View v) { resetImg(); switch (v.getId()) { case R.id.id_tab_weixin: mViewPager.setCurrentItem(0); 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_settings: 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); } }