android利用ViewPage和ImageView实现主界面导航

实现的效果

一：布局

activity_main.xml文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <!-- top -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_margin="3dp"        android:layout_weight="1" >        <include layout="@layout/main_top" />    </LinearLayout>    <!-- center -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="9" >        <android.support.v4.view.ViewPager            android:id="@+id/v4_viewpage"            android:layout_width="match_parent"            android:layout_height="match_parent" >        </android.support.v4.view.ViewPager>    </LinearLayout>    <!-- bottom -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1.2"        android:orientation="vertical" >        <include layout="@layout/main_bottom" />    </LinearLayout></LinearLayout>

main_bottom.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="horizontal" >    <LinearLayout        android:id="@+id/main_bottom_l1"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:orientation="vertical" >        <ImageView            android:id="@+id/main_bottom_img1"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:src="@drawable/bg" />    </LinearLayout>    <LinearLayout        android:id="@+id/main_bottom_l2"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:orientation="vertical" >        <ImageView            android:id="@+id/main_bottom_img2"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:src="@drawable/ic_launcher" />    </LinearLayout>    <LinearLayout        android:id="@+id/main_bottom_l3"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:orientation="vertical" >        <ImageView            android:id="@+id/main_bottom_img3"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:src="@drawable/ic_launcher" />    </LinearLayout>    <LinearLayout        android:id="@+id/main_bottom_l4"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:orientation="vertical" >        <ImageView            android:id="@+id/main_bottom_img4"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:src="@drawable/ic_launcher" />    </LinearLayout></LinearLayout>

main_center_1.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" >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:text="view1"        android:textColor="#ffffff" /></LinearLayout>

main_center_2.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" >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:text="view2"        android:textColor="#ffffff" /></LinearLayout>

main_center_3.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" >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:text="view3"        android:textColor="#ffffff" /></LinearLayout>

main_center_4.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" >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:text="view4"        android:textColor="#ffffff" /></LinearLayout>

main_top.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:background="#000000"    android:orientation="vertical" >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="center"        android:gravity="center"        android:padding="3dp"        android:text="main_top"        android:textColor="#ffffff"        android:textSize="18sp" /></LinearLayout>

二：src目录结构

MyViewPageAdapter.java文件：

package com.peng.all_adapters;import java.util.List;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;/* * center适配器：给main中间的布局用的 */public class MyViewPageAdapter extends FragmentPagerAdapter {private List<Fragment> list;public MyViewPageAdapter(FragmentManager fm, List<Fragment> list) {super(fm);this.list = list;}@Overridepublic Fragment getItem(int arg0) {return list.get(arg0);}@Overridepublic int getCount() {return list.size();}}

MainAcyivity.java文件：

package com.peng.bujukuangjia;import java.util.ArrayList;import java.util.List;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageView;import com.peng.all_adapters.MyViewPageAdapter;import com.peng.mianview_fragment.Main_Fragment_1;import com.peng.mianview_fragment.Main_Fragment_2;import com.peng.mianview_fragment.Main_Fragment_3;import com.peng.mianview_fragment.Main_Fragment_4;public class MainActivity extends FragmentActivity implements OnClickListener,OnPageChangeListener {// 底部导航控件private ImageView main_bottom_img1;private ImageView main_bottom_img2;private ImageView main_bottom_img3;private ImageView main_bottom_img4;// center中的fragmentprivate Main_Fragment_1 mf_1;private Main_Fragment_2 mf_2;private Main_Fragment_3 mf_3;private Main_Fragment_4 mf_4;// viewpage数据源List<Fragment> viewpage_view_datas;// viewpage控件ViewPager center_viewpage;// viewpage适配器MyViewPageAdapter center_adapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 初始化控件initViews();// 初始化数据initDatas();// 添加监听事件setViewsAction();// 添加适配器setViewsAdapter();}// 初始化控件private void initViews() {// 底部导航控件main_bottom_img1 = (ImageView) findViewById(R.id.main_bottom_img1);main_bottom_img2 = (ImageView) findViewById(R.id.main_bottom_img2);main_bottom_img3 = (ImageView) findViewById(R.id.main_bottom_img3);main_bottom_img4 = (ImageView) findViewById(R.id.main_bottom_img4);// center：viewpagecenter_viewpage = (ViewPager) findViewById(R.id.v4_viewpage);}// 初始化数据private void initDatas() {// center中的fragmentmf_1 = new Main_Fragment_1();mf_2 = new Main_Fragment_2();mf_3 = new Main_Fragment_3();mf_4 = new Main_Fragment_4();viewpage_view_datas = new ArrayList<Fragment>();viewpage_view_datas.add(mf_1);viewpage_view_datas.add(mf_2);viewpage_view_datas.add(mf_3);viewpage_view_datas.add(mf_4);}// 添加监听事件private void setViewsAction() {// 底部导航控件main_bottom_img1.setOnClickListener(this);main_bottom_img2.setOnClickListener(this);main_bottom_img3.setOnClickListener(this);main_bottom_img4.setOnClickListener(this);// center_viewpage监听事件center_viewpage.setOnPageChangeListener(this);}// 添加适配器private void setViewsAdapter() {// 中间布局center的适配器center_adapter = new MyViewPageAdapter(getSupportFragmentManager(),viewpage_view_datas);center_viewpage.setAdapter(center_adapter);}// 全局单击事件@Overridepublic void onClick(View v) {switch (v.getId()) {/*-------------底部导航控件--------------*/case R.id.main_bottom_img1: {// 初始化initBottomImg();center_viewpage.setCurrentItem(0);// 改变main_bottom_img1.setImageResource(R.drawable.bg);break;}case R.id.main_bottom_img2: {// 初始化initBottomImg();center_viewpage.setCurrentItem(1);// 改变main_bottom_img2.setImageResource(R.drawable.bg);break;}case R.id.main_bottom_img3: {// 初始化initBottomImg();center_viewpage.setCurrentItem(2);// 改变main_bottom_img3.setImageResource(R.drawable.bg);break;}case R.id.main_bottom_img4: {// 初始化initBottomImg();center_viewpage.setCurrentItem(3);// 改变main_bottom_img4.setImageResource(R.drawable.bg);break;}/*-------------底部导航控件--------------*/default:break;}}// 页面变化监听事件@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int arg0) {switch (arg0) {case 0: {// 初始化initBottomImg();// 改变main_bottom_img1.setImageResource(R.drawable.bg);break;}case 1: {// 初始化initBottomImg();// 改变main_bottom_img2.setImageResource(R.drawable.bg);break;}case 2: {// 初始化initBottomImg();// 改变main_bottom_img3.setImageResource(R.drawable.bg);break;}case 3: {// 初始化initBottomImg();// 改变main_bottom_img4.setImageResource(R.drawable.bg);break;}default:break;}}// 底部导航初始化private void initBottomImg() {main_bottom_img1.setImageResource(R.drawable.ic_launcher);main_bottom_img2.setImageResource(R.drawable.ic_launcher);main_bottom_img3.setImageResource(R.drawable.ic_launcher);main_bottom_img4.setImageResource(R.drawable.ic_launcher);}}

Main_Fragment_1.java文件：

package com.peng.mianview_fragment;import com.peng.bujukuangjia.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class Main_Fragment_1 extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(R.layout.main_center_1, container, false);return view;}}

Main_Fragment_2.java文件：

package com.peng.mianview_fragment;import com.peng.bujukuangjia.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class Main_Fragment_2 extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(R.layout.main_center_2, container, false);return view;}}

Main_Fragment_3.java文件：

package com.peng.mianview_fragment;import com.peng.bujukuangjia.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class Main_Fragment_3 extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(R.layout.main_center_3, container, false);return view;}}

Main_Fragment_4.java文件：

package com.peng.mianview_fragment;import com.peng.bujukuangjia.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class Main_Fragment_4 extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(R.layout.main_center_4, container, false);return view;}}

三：配置文件

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.peng.bujukuangjia"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="8"        android:targetSdkVersion="23" />    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android:name="com.peng.bujukuangjia.MainActivity"            android:label="@string/app_name"            android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

四：补充--图片（需要的话从这里截图哦！）

bg.png文件：

ic_launcher.png文件：