使用ViewPager+LinearLayout来实现页面之间的切换和点击
来源：互联网 发布：疯狂的美工京东注册码 编辑：程序博客网 时间：2024/06/04 19:31
运行大致效果为： 
//从项目中粘贴出来的，随手一记，方便下次查看，这个写的很复杂，有时间在用其他方法。
strings.xml
<!--tab键切换--> <string name="text_home">主页</string> <string name="text_adress">联系人</string> <string name="text_message">信息</string> <string name="text_mine">个人中心</string>colors.xml
//色码不是很准确，需要的自己找
<color name="a55a">#a5a5a5</color> <color name="orange">#F18F40</color> <color name="line">#CCCCCC</color> <color name="bg_gray">#F2F2F2</color> <color name="blue">#2A94D2</color> <color name="green">#63B73E</color>首先显示导航选项卡：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#eee"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:paddingBottom="0dp" android:weightSum="4" android:id="@+id/linearLayout" android:background="@color/cdef"> <LinearLayout android:id="@+id/liner_tab1" android:layout_width="wrap_content" android:layout_height="48dp" android:orientation="vertical" android:layout_weight="1" android:paddingTop="7dp" android:background="@color/cd9d"> <ImageView android:id="@+id/image_homepage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:clickable="true" android:scaleType="matrix" android:src="@drawable/tab_pre_one" /> <TextView android:id="@+id/tv_home" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/text_home" android:textColor="@color/c00b" android:textSize="12sp" android:gravity="center" android:layout_gravity="center_horizontal"/> </LinearLayout> <LinearLayout android:id="@+id/liner_tab2" android:layout_width="wrap_content" android:layout_height="48dp" android:paddingTop="7dp" android:layout_gravity="center_horizontal" android:orientation="vertical" android:layout_weight="1"> <ImageView android:id="@+id/image_address" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:scaleType="matrix" android:src="@drawable/tab_two_normal" android:layout_gravity="center_horizontal"/> <TextView android:id="@+id/tv_address" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/text_adress" android:textColor="@color/a55a" android:textSize="12sp" android:gravity="center" android:layout_gravity="center_horizontal"/> </LinearLayout> <LinearLayout android:id="@+id/liner_tab3" android:layout_width="wrap_content" android:layout_height="48dp" android:layout_gravity="center_horizontal" android:orientation="vertical" android:layout_weight="1" android:paddingTop="7dp"> <ImageView android:id="@+id/image_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="matrix" android:clickable="true" android:src="@drawable/tab_three_normal" android:layout_gravity="center_horizontal"/> <TextView android:id="@+id/tv_message" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/text_message" android:textColor="@color/a55a" android:textSize="12sp" android:gravity="center" android:layout_gravity="center_horizontal"/> </LinearLayout> <LinearLayout android:id="@+id/liner_tab4" android:layout_width="wrap_content" android:layout_height="48dp" android:layout_gravity="center_horizontal" android:orientation="vertical" android:layout_weight="1" android:paddingTop="7dp"> <ImageView android:id="@+id/image_personl" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:scaleType="matrix" android:src="@drawable/tab_four_normal" android:layout_gravity="center_horizontal"/> <TextView android:id="@+id/tv_mine" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/text_mine" android:textColor="@color/a55a" android:textSize="12sp" android:gravity="center" android:layout_gravity="center_horizontal"/> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:orientation="vertical" android:layout_above="@+id/linearLayout"> <android.support.v4.view.ViewPager android:id="@+id/tabpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"> </android.support.v4.view.ViewPager> </LinearLayout></RelativeLayout>其次是每个View，这里只写了四个中的其中一个：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/orange"></LinearLayout>这里写代码中的逻辑:
package com.chuanshen.excelledoa;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.Display;import android.view.Gravity;import android.view.KeyEvent;import android.view.LayoutInflater;import android.view.View;import android.view.WindowManager;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.AdapterView;import android.widget.GridView;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.PopupWindow;import android.widget.TextView;import com.chuanshen.excelledoa.adapter.GridAdapter;import java.util.ArrayList;/** * Created by S on 2017/5/24. */public class HomePageActivity extends Activity { public static HomePageActivity instance = null; private ViewPager mTabPager; private ImageView mTabImg; private ImageView mHomePage,mAdress,mMessage,mPersonl; private int zero = 0; private int currIndex = 0; private int one; private int two; private int three; private LinearLayout mClose; private LinearLayout mCloseBtn; private PopupWindow menuWindow; private LayoutInflater inflater; private boolean menu_display = false; private GridAdapter mAdapter; private TextView tv_home,tv_address,tv_message,tv_mine; private LinearLayout linear_tab1,linear_tab2,linear_tab3,linear_tab4; private View layout; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_oa); getWindow().setSoftInputMode( WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN); initView(); } private void initView() { instance = this; mTabPager = (ViewPager)findViewById(R.id.tabpager); mTabPager.setOnPageChangeListener(new MyOnPageChangeListener()); tv_home = (TextView) findViewById(R.id.tv_home); tv_address = (TextView) findViewById(R.id.tv_address); tv_message = (TextView) findViewById(R.id.tv_message); tv_mine = (TextView) findViewById(R.id.tv_mine); linear_tab1 = (LinearLayout) findViewById(R.id.liner_tab1); linear_tab2 = (LinearLayout) findViewById(R.id.liner_tab2); linear_tab3 = (LinearLayout) findViewById(R.id.liner_tab3); linear_tab4 = (LinearLayout) findViewById(R.id.liner_tab4); mHomePage = (ImageView) findViewById(R.id.image_homepage); mAdress = (ImageView) findViewById(R.id.image_address); mMessage = (ImageView) findViewById(R.id.image_message); mPersonl = (ImageView) findViewById(R.id.image_personl); mHomePage.setOnClickListener(new MyOnClickListener(0)); mAdress.setOnClickListener(new MyOnClickListener(1)); mMessage.setOnClickListener(new MyOnClickListener(2)); mPersonl.setOnClickListener(new MyOnClickListener(3)); Display currDisplay = getWindowManager().getDefaultDisplay(); int displayWidth = currDisplay.getWidth(); int displayHeight = currDisplay.getHeight(); one = displayWidth/4; two = one*2; three = one*3; LayoutInflater mLi = LayoutInflater.from(this); View view1 = mLi.inflate(R.layout.tab_homepage,null); View view2 = mLi.inflate(R.layout.tab_address,null); View view3 = mLi.inflate(R.layout.tab_message,null); View view4 = mLi.inflate(R.layout.tab_person,null); final ArrayList<View> views = new ArrayList<View>(); views.add(view1); views.add(view2); views.add(view3); views.add(view4); PagerAdapter mPagerAdapter = new PagerAdapter() { @Override public int getCount() { return views.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0==arg1; } @Override public void destroyItem(View container, int position, Object object) { ((ViewPager)container).removeView(views.get(position)); } @Override public Object instantiateItem(View container, int position) { ((ViewPager)container).addView(views.get(position)); //return super.instantiateItem(container, position); return views.get(position); } }; mTabPager.setAdapter(mPagerAdapter); } /** * 头标点击监听 */ public class MyOnClickListener implements View.OnClickListener { private int index = 0; public MyOnClickListener(int i){ index = i; } @Override public void onClick(View v) { mTabPager.setCurrentItem(index); } } /** * 页卡切换监听 */ private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener { @Override public void onPageSelected(int arg0) { Animation animation = null; switch (arg0){ case 0: mHomePage.setImageDrawable(getResources().getDrawable(R.drawable.tab_pre_one)); //TextView1.setTextColor(this.getResources().getColor(R.drawable.red)); tv_home.setTextColor(getResources().getColor(R.color.c00b)); linear_tab1.setBackgroundColor(getResources().getColor(R.color.cd9d)); //mHomePage.setImageDrawable(getResources().getDrawable(R.mipmap.tab_pre_one)); if(currIndex == 1){ animation = new TranslateAnimation(one,0,0,0); mAdress.setImageDrawable(getResources().getDrawable(R.drawable.tab_two_normal)); tv_address.setTextColor(getResources().getColor(R.color.a55a)); linear_tab2.setBackgroundColor(getResources().getColor(R.color.cdef)); }else if(currIndex == 2){ animation = new TranslateAnimation(two,0,0,0); mMessage.setImageDrawable(getResources().getDrawable(R.drawable.tab_three_normal)); tv_message.setTextColor(getResources().getColor(R.color.a55a)); linear_tab3.setBackgroundColor(getResources().getColor(R.color.cdef)); }else if(currIndex == 3){ animation = new TranslateAnimation(three,0,0,0); mPersonl.setImageDrawable(getResources().getDrawable(R.drawable.tab_four_normal)); tv_mine.setTextColor(getResources().getColor(R.color.a55a)); linear_tab4.setBackgroundColor(getResources().getColor(R.color.cdef)); } break; case 1: mAdress.setImageDrawable(getResources().getDrawable(R.drawable.tab_pre_two)); tv_address.setTextColor(getResources().getColor(R.color.c00b)); linear_tab2.setBackgroundColor(getResources().getColor(R.color.cd9d)); if(currIndex == 0){ animation = new TranslateAnimation(zero,one,0,0); mHomePage.setImageDrawable(getResources().getDrawable(R.drawable.tab_one_normal)); tv_home.setTextColor(getResources().getColor(R.color.a55a)); linear_tab1.setBackgroundColor(getResources().getColor(R.color.cdef)); }else if(currIndex == 2){ animation = new TranslateAnimation(two,one,0,0); mMessage.setImageDrawable(getResources().getDrawable(R.drawable.tab_three_normal)); tv_message.setTextColor(getResources().getColor(R.color.a55a)); linear_tab3.setBackgroundColor(getResources().getColor(R.color.cdef)); }else if(currIndex == 3){ animation = new TranslateAnimation(three,one,0,0); mPersonl.setImageDrawable(getResources().getDrawable(R.drawable.tab_four_normal)); tv_mine.setTextColor(getResources().getColor(R.color.a55a)); linear_tab4.setBackgroundColor(getResources().getColor(R.color.cdef)); } break; case 2: mMessage.setImageDrawable(getResources().getDrawable(R.drawable.tab_pre_three)); tv_message.setTextColor(getResources().getColor(R.color.c00b)); linear_tab3.setBackgroundColor(getResources().getColor(R.color.cd9d)); if(currIndex == 0){ animation = new TranslateAnimation(zero,two,0,0); mHomePage.setImageDrawable(getResources().getDrawable(R.drawable.tab_one_normal)); tv_home.setTextColor(getResources().getColor(R.color.a55a)); linear_tab1.setBackgroundColor(getResources().getColor(R.color.cdef)); }else if(currIndex == 1){ animation = new TranslateAnimation(one,two,0,0); mAdress.setImageDrawable(getResources().getDrawable(R.drawable.tab_two_normal)); tv_address.setTextColor(getResources().getColor(R.color.a55a)); linear_tab2.setBackgroundColor(getResources().getColor(R.color.cdef)); }else if(currIndex == 3){ animation = new TranslateAnimation(three,two,0,0); mPersonl.setImageDrawable(getResources().getDrawable(R.drawable.tab_four_normal)); tv_mine.setTextColor(getResources().getColor(R.color.a55a)); linear_tab4.setBackgroundColor(getResources().getColor(R.color.cdef)); } break; case 3: mPersonl.setImageDrawable(getResources().getDrawable(R.drawable.tab_pre_four)); tv_mine.setTextColor(getResources().getColor(R.color.c00b)); linear_tab4.setBackgroundColor(getResources().getColor(R.color.cd9d)); if(currIndex == 0){ animation = new TranslateAnimation(zero,three,0,0); mHomePage.setImageDrawable(getResources().getDrawable(R.drawable.tab_one_normal)); tv_home.setTextColor(getResources().getColor(R.color.a55a)); linear_tab1.setBackgroundColor(getResources().getColor(R.color.cdef)); }else if(currIndex == 1){ animation = new TranslateAnimation(one,three,0,0); mAdress.setImageDrawable(getResources().getDrawable(R.drawable.tab_two_normal)); tv_address.setTextColor(getResources().getColor(R.color.a55a)); linear_tab2.setBackgroundColor(getResources().getColor(R.color.cdef)); }else if(currIndex == 2){ animation = new TranslateAnimation(two,three,0,0); mMessage.setImageDrawable(getResources().getDrawable(R.drawable.tab_three_normal)); tv_message.setTextColor(getResources().getColor(R.color.a55a)); linear_tab3.setBackgroundColor(getResources().getColor(R.color.cdef)); } break; } currIndex = arg0; animation.setFillAfter(true); animation.setDuration(150); //设置底部滑动动画 // mTabImg.startAnimation(animation); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageScrollStateChanged(int state) { } } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode==KeyEvent.KEYCODE_BACK&&event.getRepeatCount()==0){ if(menu_display){ menuWindow.dismiss(); menu_display = false; }else{ Intent intent = new Intent(); intent.setClass(HomePageActivity.this,Exit.class); startActivity(intent); } }else if(keyCode==KeyEvent.KEYCODE_MENU) { if (!menu_display) { inflater = (LayoutInflater) this.getSystemService(LAYOUT_INFLATER_SERVICE); layout = inflater.inflate(R.layout.main_menu, null); menuWindow = new PopupWindow(layout, ViewPager.LayoutParams.FILL_PARENT, WindowManager.LayoutParams.WRAP_CONTENT); menuWindow.showAtLocation(this.findViewById(R.id.mainhome), Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0); mClose = (LinearLayout) layout.findViewById(R.id.menu_close); mCloseBtn = (LinearLayout) layout.findViewById(R.id.menu_close_btn); mCloseBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { Intent intent = new Intent(); intent.setClass(HomePageActivity.this, Exit.class); startActivity(intent); menuWindow.dismiss(); } }); menu_display = true; }else{ menuWindow.dismiss(); menu_display = false; } return false; } return false; } private class Exit { }}阅读全文
0 0
- 使用ViewPager+LinearLayout来实现页面之间的切换和点击
- 使用TabHost和ViewPager实现页面切换
- ViewPager和 Fragment 实现的页面切换
- 使用ViewPager和Fragment同时实现点击底部Tab切换和手势滑动切换Fragment
- 通过点击按钮实现ViewPager的切换
- TabHost+ViewPager实现 点击选项卡和滑动界面都可以切换页面
- android ViewPager实现App主界面Tab菜单页面切换和点击事件
- Android之ViewPager+Fragment实现页面点击切换和手势滑动
- Android TabLayout、ViewPager实现顶部和底部Tab导航 点击滑动切换Tab页面
- Android之ViewPager+Fragment实现页面点击切换和手势滑动
- Android 使用ViewPager和RadioGroup配合Fragment实现标签页，可点击按钮切换、滑动切换。
- ViewPager和RadioGroup实现页面切换效果
- RadioButton和ViewPager实现页面切换效果
- RadionButton和Viewpager实现页面切换联动
- android ViewPager 实现点击小圆点切换页面 案例
- ViewPager+Fragment+RadioGroup实现页面联动\点击切换
- Android ViewPager加Fragment实现滑动或者点击页面切换
- ViewPager实现页面切换
- Error:Execution failed for task ':app:processDebugManifest'. Manifest merger failed with 问题解决方案
- javascript基础DOM操作
- 如何使用Unity制作Pixel效果的技巧
- JavaScript 三种创建对象的方法
- JavaBean规范
- 使用ViewPager+LinearLayout来实现页面之间的切换和点击
- MyBatis学习总结(一)——MyBatis快速入门
- 免安装版配置教程
- 数7
- 项目实训-千寻-分享与展示功能
- 安卓智能地图开发与实施十四：业务数据编辑
- Android源码基础解析之SystemServer进程启动流程
- python 检测[](){}匹配小程序
- Vuforia的学习（一）---Vuforia的介绍
