首先上图,应用的界面大致是这个样子:
我是这么实现的:
整体的架构是使用viewpager+fragment,所以写了四个fragment,并且把viewpager设置成不可滑动。
也就是说,顶部的bar和下面的四个分类都是在一个布局中的,中间是一个viewpager,每次点击下面的分类按钮的时候,就切换viewpager中的pager,同时对应切换顶部和底部bar的状态。
主布局的代码:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <include android:id="@+id/top_title" layout="@layout/layout_top" /> <com.yunkp.wenda.widget.UnSliderViewPager android:id="@+id/main_viewpager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> <LinearLayout android:id="@+id/main_tab" android:layout_width="fill_parent" android:layout_height="55dp" android:background="#F5F5F5" android:orientation="horizontal" > <LinearLayout android:id="@+id/ll_question" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <ImageButton android:id="@+id/tab_question" android:layout_width="25dp" android:layout_height="32dp" android:layout_gravity="center_horizontal" android:background="@null" android:clickable="true" android:paddingTop="8dp" android:scaleType="centerInside" android:src="@drawable/tab_home_focus" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:paddingTop="4dp" android:text="首页" android:textSize="12sp" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <ImageButton android:id="@+id/tab_search" android:layout_width="25dp" android:layout_height="32dp" android:layout_gravity="center_horizontal" android:background="@null" android:paddingTop="8dp" android:scaleType="centerInside" android:src="@drawable/tab_explore" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:paddingTop="4dp" android:text="发现" android:textSize="12sp" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <ImageButton android:id="@+id/tab_category" android:layout_width="25dp" android:layout_height="32dp" android:layout_gravity="center_horizontal" android:background="@null" android:paddingTop="8dp" android:scaleType="centerInside" android:src="@drawable/tab_answer" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:paddingTop="4dp" android:text="分类" android:textSize="12sp" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <ImageButton android:id="@+id/tab_person" android:layout_width="25dp" android:layout_height="32dp" android:layout_gravity="center_horizontal" android:background="@null" android:paddingTop="8dp" android:scaleType="centerInside" android:src="@drawable/tab_user" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:paddingTop="4dp" android:text="个人" android:textSize="12sp" /> </LinearLayout> </LinearLayout></LinearLayout>
主activity的代码:
public class MainActivity extends BaseActivity implements OnClickListener { // 定义界面标识常量 public static final int QUESTION_PAGE = 0; public static final int FOUND_PAGE = 1; public static final int CATEGORY_PAGE = 2; public static final int PERSON_PAGE = 3; // Title中的各个按钮 @ViewInject(R.id.ib_topleft) private ImageButton ib_topleft; @ViewInject(R.id.tv_topleft) private TextView tv_topleft; @ViewInject(R.id.tv_toptitle) private TextView tv_toptitle; @ViewInject(R.id.tv_topright) private TextView tv_topright; @ViewInject(R.id.ib_topright) private ImageButton ib_topright; // 主ViewPager @ViewInject(R.id.main_viewpager) private UnSliderViewPager main_viewpager; // 下方的选择按钮 @ViewInject(R.id.main_tab) private LinearLayout main_tab; @ViewInject(R.id.tab_question) private ImageButton tab_question; @ViewInject(R.id.tab_search) private ImageButton tab_search; @ViewInject(R.id.tab_category) private ImageButton tab_category; @ViewInject(R.id.tab_person) private ImageButton tab_person; private List<BaseFragment> fragmentList = new ArrayList<>(); // 当前界面 private int currentPage; private int pagerId; @Override protected void onCreate(Bundle savedInstanceState) { setContentView(R.layout.activity_main); pagerId = getIntent().getIntExtra("pagerid", 1); super.onCreate(savedInstanceState); } @Override protected void initView() { ViewUtils.inject(this); setOnClickListener(); } @Override protected void initData() { fragmentList.add(new QuestionFragment()); fragmentList.add(new FoundFragment()); fragmentList.add(new CategoryFragment()); fragmentList.add(new PersonFragment()); MainFragmentAdapter mainFragmentAdapter = new MainFragmentAdapter( getSupportFragmentManager(), fragmentList); main_viewpager.setAdapter(mainFragmentAdapter); toSelectedPage(pagerId); } private void toSelectedPage(int pagerId) { if (pagerId == 1) { toFoundPage(); } if (pagerId == 2) { toQuestionPage(); } if (pagerId == 3) { toCategoryPage(); } if (pagerId == 6) { toPersonPage(); } } // 监听返回按钮退出,提示对话框 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { finish(); return true; } // 点击事件处理 @Override public void onClick(View v) { switch (v.getId()) { // 下方按钮监听 case R.id.tab_question: toQuestionPage(); break; case R.id.tab_search: toFoundPage(); break; case R.id.tab_category: toCategoryPage(); break; case R.id.tab_person: toPersonPage(); break; // 标题属性监听 case R.id.tv_topleft: switch (currentPage) { case QUESTION_PAGE: Toast.makeText(MainActivity.this, "搜索窗口", Toast.LENGTH_SHORT).show(); break; case FOUND_PAGE: break; case CATEGORY_PAGE: break; case PERSON_PAGE: break; default: break; } break; case R.id.tv_topright: Intent reportIntent = new Intent(this, ReportActivity.class); switch (currentPage) { case QUESTION_PAGE: startActivity(reportIntent); break; case FOUND_PAGE: startActivity(reportIntent); break; case CATEGORY_PAGE: startActivity(reportIntent); break; case PERSON_PAGE: Intent intent = new Intent(this, SettingActivity.class); startActivity(intent); break; default: break; } break; case R.id.ib_topleft: Intent searchIntent = new Intent(this, SearchActivity.class); switch (currentPage) { case QUESTION_PAGE: startActivity(searchIntent); break; case FOUND_PAGE: startActivity(searchIntent); break; case CATEGORY_PAGE: break; case PERSON_PAGE: break; default: break; } break; default: break; } } // 对组件设置监听 private void setOnClickListener() { // 标题按钮监听 tv_topleft.setOnClickListener(this); tv_topright.setOnClickListener(this); ib_topleft.setOnClickListener(this); ib_topright.setOnClickListener(this); // 下部按钮监听 tab_question.setOnClickListener(this); tab_search.setOnClickListener(this); tab_category.setOnClickListener(this); tab_person.setOnClickListener(this); } // 把所有Button颜色还原 private void setToCommonButton() { tab_question.setImageDrawable(getResources().getDrawable( R.drawable.tab_home)); tab_search.setImageDrawable(getResources().getDrawable( R.drawable.tab_explore)); tab_category.setImageDrawable(getResources().getDrawable( R.drawable.tab_answer)); tab_person.setImageDrawable(getResources().getDrawable( R.drawable.tab_user)); tv_topleft.setVisibility(View.GONE); tv_topright.setVisibility(View.GONE); ib_topleft.setVisibility(View.GONE); ib_topright.setVisibility(View.GONE); } // 问题界面初始化 private void toQuestionPage() { setToCommonButton(); // 左侧-搜索 ib_topleft.setVisibility(View.VISIBLE); ib_topleft.setImageDrawable(getResources().getDrawable( R.drawable.icon_search)); // 右侧-提问 tv_topright.setVisibility(View.VISIBLE); tv_topright.setText("提问"); // 中间 tv_toptitle.setText("科普百问"); tab_question.setImageDrawable(getResources().getDrawable( R.drawable.tab_home_focus)); main_viewpager.setCurrentItem(0, false); currentPage = QUESTION_PAGE; } // 发现初始化 private void toFoundPage() { setToCommonButton(); // 中间 tv_toptitle.setText("每日一科普"); // 左侧-搜索 ib_topleft.setVisibility(View.VISIBLE); ib_topleft.setImageDrawable(getResources().getDrawable( R.drawable.icon_search)); tab_search.setImageDrawable(getResources().getDrawable( R.drawable.tab_explore_focus)); main_viewpager.setCurrentItem(1, false); currentPage = FOUND_PAGE; } // 分类界面初始化 private void toCategoryPage() { setToCommonButton(); // 中间 tv_toptitle.setText("问题分类"); tab_category.setImageDrawable(getResources().getDrawable( R.drawable.tab_answer_focus)); main_viewpager.setCurrentItem(2, false); currentPage = CATEGORY_PAGE; } // 个人中心界面初始化 private void toPersonPage() { setToCommonButton(); // 右侧-设置 tv_topright.setVisibility(View.VISIBLE); tv_topright.setText("设置"); // 中间 tv_toptitle.setText("个人中心"); tab_person.setImageDrawable(getResources().getDrawable( R.drawable.tab_user_focus)); main_viewpager.setCurrentItem(3, false); currentPage = PERSON_PAGE; }}