最近在看融云demo的时候看到了viewpager和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"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom"/>
</LinearLayout>
这是bottom的布局:
<?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:layout_marginBottom="5dp"
android:background="#40ff"
android:orientation="horizontal"
>
<LinearLayout
android:id="@+id/id_tab_mycircle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<!-- android:clickable="false" 是为了防止ImageButton截取了触摸事件 ,这里事件要给它的上一级linearlayout-->
<ImageButton
android:id="@+id/id_tab_mycirlceImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的圈子"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_discovery"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_discovery_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发现"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_message"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_message_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="消息"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_setting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="个人中心"
/>
</LinearLayout>
</LinearLayout>
package com.im.app; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; import android.widget.ImageButton; import android.widget.LinearLayout; import android.widget.Toast; import com.im.app.fragment.Home1Fragment; import com.im.app.fragment.Home2Fragment; import com.im.app.fragment.Home3Fragment; import com.im.app.fragment.Home4Fragment; import java.util.ArrayList; import java.util.List; /** * */ public class ConversationlistActivity extends FragmentActivity implements View.OnClickListener{ //定义控件 private ViewPager mViewPager; //四个Tab每个Tab都有一个按钮 private LinearLayout mTabMyCircle; private LinearLayout mTabMyDiscovery; private LinearLayout mTabMyMsg; private LinearLayout mTabMyCenter; //四个按钮 private ImageButton myCircleImg; private ImageButton myDiscoveryImg; private ImageButton myMsgImg; private ImageButton myCenterImg; private List<Fragment> mFragment ; private FragmentPagerAdapter mFragmentPagerAdapter; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.home_activty); initView(); initEvent();//初始化监听事件 initViewPagers();//初始化viewpager的四个布局 } /** * 初始化viewpager的四个布局 */ private void initViewPagers() { mFragment = new ArrayList<>(); mFragment.add(new Home1Fragment()); mFragment.add(new Home2Fragment()); mFragment.add(new Home3Fragment()); mFragment.add(new Home4Fragment()); //控制viewpager所在页所显示的fragment mFragmentPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { //控制fragment的数量 @Override public int getCount() { return mFragment.size(); } //控制viewpager所在页所显示的fragment @Override public Fragment getItem(int position) { return mFragment.get(position); } }; mViewPager.setAdapter(mFragmentPagerAdapter); //设置适配器 } //初始化监听 private void initEvent() { myCircleImg.setOnClickListener(this); myDiscoveryImg.setOnClickListener(this); myMsgImg.setOnClickListener(this); myCenterImg.setOnClickListener(this); mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //当页面滑动到某一position位置的时候调用 @Override public void onPageSelected(int position) { int currentItem = mViewPager.getCurrentItem();//过去当前所显示的item Toast.makeText(ConversationlistActivity.this, "当前的位置是:"+currentItem, Toast.LENGTH_SHORT).show(); switch (currentItem){ case 0: myCircleImg.setImageResource(R.mipmap.ic_launcher); break;
//这个地方可以控制下面底部栏的颜色变化
} } @Override public void onPageScrollStateChanged(int state) { } }); } /** * 初始化控件 */ private void initView() { mViewPager = (ViewPager) findViewById(R.id.viewpager); //初始化四个布局 mTabMyCircle = (LinearLayout) findViewById(R.id.id_tab_mycircle); mTabMyDiscovery = (LinearLayout) findViewById(R.id.id_tab_discovery); mTabMyMsg = (LinearLayout) findViewById(R.id.id_tab_message); mTabMyCenter = (LinearLayout) findViewById(R.id.id_tab_setting); //初始化四个按钮 myCircleImg = (ImageButton) findViewById(R.id.id_tab_mycirlceImg); myDiscoveryImg = (ImageButton) findViewById(R.id.id_tab_discovery_img); myMsgImg = (ImageButton) findViewById(R.id.id_tab_message_img); myCenterImg = (ImageButton) findViewById(R.id.id_tab_setting_img); } @Override public void onClick(View v) { int vId = v.getId(); switch (vId){ case R.id.id_tab_mycirlceImg: mViewPager.setCurrentItem(0); break; case R.id.id_tab_discovery_img: mViewPager.setCurrentItem(1); break; case R.id.id_tab_message_img: mViewPager.setCurrentItem(2); break; case R.id.id_tab_setting_img: mViewPager.setCurrentItem(3); break; } } @Override protected void onDestroy() { super.onDestroy(); mFragment = null; mViewPager = null; mFragmentPagerAdapter = null; } }