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

时间：2021-10-15 20:43:26

       因为导航界面是要实现侧滑功能，所以就要用到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>
标签：

相关文章