美团（四）之导航界面底部带小圆点效果的实现

最新推荐文章于 2020-03-22 22:40:40 发布

雨田先生0502

最新推荐文章于 2020-03-22 22:40:40 发布

阅读量1.2k

点赞数

分类专栏： android

本文链接：https://blog.csdn.net/huanglei201502/article/details/46849571

版权

android 专栏收录该内容

113 篇文章 0 订阅

订阅专栏

因为导航界面是要实现侧滑功能，所以就要用到viewpager这个控件，在android中viewpager的功能就是实现侧滑，在使用时要创建viewpager适配器。然后就是在滑动的界面底部有几个小圆点，小圆点随着界面的滑动一起滑动，看起很酷的感觉，下面就可以实现了：

package com.myandroid.meituan;

import java.util.ArrayList;

import com.myandroid.meituan.MeiTuanTuanGouActivity.MyViewPagerAdapter;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.ImageView;

public class NavbarActivity extends Activity {
	private ViewPager mViewPager;
	private Button mStartBut;
	private ImageView mImageView1, mImageView2, mImageView3, mImageView4;
    private final int ONE_PAGE=0,TWO_PAGE=1,THREE_PAGE=2,FOUR_PAGE=3;
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_navbar);

		mViewPager = (ViewPager) findViewById(R.id.navbar_viewpager);
		mImageView1 = (ImageView) findViewById(R.id.onepager);
		mImageView2 = (ImageView) findViewById(R.id.twopager);
		mImageView3 = (ImageView) findViewById(R.id.threepager);
		mImageView4 = (ImageView) findViewById(R.id.fourpager);
        //通过LayoutInflater把四个要滑动的界面布局转化成View
		View v1 = LayoutInflater.from(this).inflate(R.layout.navbar_page_one,null);
		View v2 = LayoutInflater.from(this).inflate(R.layout.navbar_page_two,null);
		View v3 = LayoutInflater.from(this).inflate(R.layout.navbar_page_three,null);
		View v4 = LayoutInflater.from(this).inflate(R.layout.navbar_page_four,null);
        
		ArrayList<View> list = new ArrayList<View>();
		list.add(v1);
		list.add(v2);
		list.add(v3);
		list.add(v4);
        //实例化viewpager适配器，因为我在这个项目里已创建过viewpager适配器，这里就直接引用，实例化它。
		MyViewPagerAdapter navbaradapter = (MyViewPagerAdapter) new MeiTuanTuanGouActivity().new MyViewPagerAdapter();
		navbaradapter.setData(list);
		mViewPager.setAdapter(navbaradapter);

		mStartBut = (Button) v4.findViewById(R.id.navbar_but);
		mStartBut.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				startActivity(new Intent(NavbarActivity.this,
						MyMeiTuanTabActivity.class));
				finish();
			}
		});
		
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			public void onPageSelected(int arg0) {
				switch (arg0) {//对滑动时界面的监听并对小圆点进行状态设置
				case ONE_PAGE:
					mImageView1.setImageResource(R.drawable.dot_choice);					
					mImageView2.setImageResource(R.drawable.dot_no_choice);
					mImageView3.setImageResource(R.drawable.dot_no_choice);
					mImageView4.setImageResource(R.drawable.dot_no_choice);
					break;
				case TWO_PAGE:
					mImageView1.setImageResource(R.drawable.dot_no_choice);
					mImageView2.setImageResource(R.drawable.dot_choice);
					mImageView3.setImageResource(R.drawable.dot_no_choice);
					mImageView4.setImageResource(R.drawable.dot_no_choice);
					break;
				case THREE_PAGE:
					mImageView1.setImageResource(R.drawable.dot_no_choice);
					mImageView2.setImageResource(R.drawable.dot_no_choice);
					mImageView3.setImageResource(R.drawable.dot_choice);
					mImageView4.setImageResource(R.drawable.dot_no_choice);	
					break;
				case FOUR_PAGE:				
					mImageView1.setImageResource(R.drawable.dot_no_choice);
					mImageView2.setImageResource(R.drawable.dot_no_choice);
					mImageView3.setImageResource(R.drawable.dot_no_choice);
					mImageView4.setImageResource(R.drawable.dot_choice);
					break;
				}
			}
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
			}
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
			}
		});
	}
}

xml文件中，要把四个小圆点个viewpager布局放在一个布局里，并且小圆点置于根布局底部：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/navbar_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="155dp"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/onepager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dot_choice" />

        <ImageView
            android:id="@+id/twopager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dot_no_choice" />

        <ImageView
            android:id="@+id/threepager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dot_no_choice" />

        <ImageView
            android:id="@+id/fourpager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dot_no_choice" />
    </LinearLayout>

</RelativeLayout>

另外每个滑动的页面也是一个布局，四个滑动界面我们还要建四个布局，每个布局放一张图片就ok：

第一张图：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/img_exchange_guide0" />

</RelativeLayout>

第二张图：<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/img_exchange_guide1" />

</RelativeLayout>
第三张图：<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/img_exchange_guide2" />

</RelativeLayout>
第四张图：<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/img_exchange_guide3" />

    <Button
        android:id="@+id/navbar_but"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="60dp"
        android:background="@drawable/selector_drawable_start"
        android:text="开启你的美团之旅>>>>"
        android:textSize="20sp" />

</RelativeLayout>

雨田先生0502

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
美团（四）之导航界面底部带小圆点效果的实现

因为导航界面是要实现侧滑功能，所以就要用到viewpager这个控件，在android中viewpager的功能就是实现侧滑，在使用时要创建viewpager适配器。然后就是在滑动的界面底部有几个小圆点，小圆点随着界面的滑动一起滑动，看起很酷的感觉，下面就可以实现了：package com.myandroid.meituan;import java.util.ArrayList;
复制链接

扫一扫

专栏目录