ViewPager+fragment实现滑动导航栏

最新推荐文章于 2024-04-05 15:23:59 发布

liu130620

最新推荐文章于 2024-04-05 15:23:59 发布

阅读量870

点赞数

文章标签： viewpager fragment 滑动选项卡

本文链接：https://blog.csdn.net/u010177443/article/details/40045619

版权

模仿百度贴吧客户端，滑动导航栏的效果，代码是网上的demo稍作修改的。

主要实现原理是初始化Fragment将其加入到viewpager中，然后实现OnPageChangeListener中的

public void onPageScrolled(int arg0, float arg1, int arg2); //滚动时调用 arg0当前界面索引从0开始，arg1偏移百分比，偏移量

public void onPageScrollStateChanged(int arg0)； //滚动状态变化时调用 1开始滚动，2滚动完毕，0什么都未做

public void onPageSelected(int arg0) ; //页面切换完毕

上代码

MainActivity

public class MainActivity extends FragmentActivity{
	 private ViewPager mPager;  
	    private ArrayList<Fragment> fragmentList;  
	    private TextView barText;  
	    private TextView view1, view2, view3, view4;  
	    private int currIndex;//当前页卡编号  

	    @Override  
	    protected void onCreate(Bundle savedInstanceState) {  
	        super.onCreate(savedInstanceState);  
	        setContentView(R.layout.main);  
	          
	        InitTextView();  
	        InitTextBar();  
	        InitViewPager();  
	    }  
	      
	      
	    /* 
	     * 初始化标签名 
	     */  
	    public void InitTextView(){  
	        view1 = (TextView)findViewById(R.id.tv_guid1);  
	        view2 = (TextView)findViewById(R.id.tv_guid2);  
	        view3 = (TextView)findViewById(R.id.tv_guid3);  
	        view4 = (TextView)findViewById(R.id.tv_guid4);  
	          
	        view1.setOnClickListener(new txListener(0));  
	        view2.setOnClickListener(new txListener(1));  
	        view3.setOnClickListener(new txListener(2));  
	        view4.setOnClickListener(new txListener(3));  
	    }  
	      
	      
	    public class txListener implements View.OnClickListener{  
	        private int index=0;  
	          
	        public txListener(int i) {  
	            index =i;  
	        }  
	        @Override  
	        public void onClick(View v) {  
	            // TODO Auto-generated method stub  
	            mPager.setCurrentItem(index);  
	        }  
	    }  
	      
	      
	    /* 
	     * 初始化图片的位移像素 
	     */  
	    public void InitTextBar(){  
	    	barText = (TextView) super.findViewById(R.id.cursor);
	    	Display display = getWindow().getWindowManager().getDefaultDisplay();
	    	          // 得到显示屏宽度
	        DisplayMetrics metrics = new DisplayMetrics();
	    	display.getMetrics(metrics);
	    	          // 1/3屏幕宽度
	    	int  tabLineLength = metrics.widthPixels / 4;
	    	 LayoutParams lp = (LayoutParams) barText.getLayoutParams();
	    	 lp.width = tabLineLength;
	    	 barText.setLayoutParams(lp);
	    	        
	    }  
	      
	    /* 
	     * 初始化ViewPager 
	     */  
	    public void InitViewPager(){  
	        mPager = (ViewPager)findViewById(R.id.viewpager);  
	        fragmentList = new ArrayList<Fragment>();  
	        Fragment btFragment= new ButtonFragment();  
	        Fragment secondFragment = TestFragment.newInstance("this is second fragment");  
	        Fragment thirdFragment = TestFragment.newInstance("this is third fragment");  
	        Fragment fourthFragment = TestFragment.newInstance("this is fourth fragment");  
	        fragmentList.add(btFragment);  
	        fragmentList.add(secondFragment);  
	        fragmentList.add(thirdFragment);  
	        fragmentList.add(fourthFragment);  
	          
	        //给ViewPager设置适配器  
	        mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));  
	        mPager.setCurrentItem(0);//设置当前显示标签页为第一页  
	        mPager.setOnPageChangeListener(new MyOnPageChangeListener());//页面变化时的监听器  
	    }  
	  
	      
	    public class MyOnPageChangeListener implements OnPageChangeListener{  
	          
	        @Override  
	        public void onPageScrolled(int arg0, float arg1, int arg2) {  
	            // TODO Auto-generated method stub  
	        	  // 取得该控件的实例
                LinearLayout.LayoutParams ll = (android.widget.LinearLayout.LayoutParams) barText
                        .getLayoutParams();
                
                if(currIndex == arg0){
                	 ll.leftMargin = (int) (currIndex * barText.getWidth() + arg1
                             * barText.getWidth());
                }else if(currIndex > arg0){
                	 ll.leftMargin = (int) (currIndex * barText.getWidth() - (1 - arg1)* barText.getWidth());
                }
                barText.setLayoutParams(ll);
	        }  
	          
	        @Override  
	        public void onPageScrollStateChanged(int arg0) {  
	            // TODO Auto-generated method stub  
	              
	        }  
	          
	        @Override  
	        public void onPageSelected(int arg0) {  
	            // TODO Auto-generated method stub  
	            currIndex = arg0;   
	            int i = currIndex + 1;  
	            Toast.makeText(MainActivity.this, "您选择了第"+i+"个页卡", Toast.LENGTH_SHORT).show();  
	        }  
	    }

main.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" >
    
	<LinearLayout   
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:orientation="horizontal">  
          
          
        <TextView   
            android:id="@+id/tv_guid1"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_weight="1.0"  
            android:gravity="center"  
            android:text="特性1"  
            android:textSize="18sp"/>  
        <TextView    
            android:id="@+id/tv_guid2"    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:layout_weight="1.0"    
            android:gravity="center"    
            android:text="特性2"     
            android:textSize="18sp"/>    
    
        <TextView    
            android:id="@+id/tv_guid3"    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:layout_weight="1.0"    
            android:gravity="center"    
            android:text="特性3 "     
            android:textSize="18sp"/>    
    
        <TextView    
            android:id="@+id/tv_guid4"    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:layout_weight="1.0"    
            android:gravity="center"    
            android:text="特性4"     
            android:textSize="18sp"/>  
    </LinearLayout>  
  
    <TextView   
        android:id="@+id/cursor"  
        android:layout_width="80dp"  
        android:layout_height="5dp"
        android:background="#990033"  
        />  
      
    <android.support.v4.view.ViewPager  
        android:id="@+id/viewpager"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:flipInterval="30"  
        android:persistentDrawingCache="animation"/> 
</LinearLayout>

MyFragmentPagerAdapter

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{

	 ArrayList<Fragment> list;  
	    public MyFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> list) {  
	        super(fm);  
	        this.list = list;  
	          
	    }  

	    @Override  
	    public int getCount() {  
	        return list.size();  
	    }  
	      
	    @Override  
	    public Fragment getItem(int arg0) {  
	        return list.get(arg0);  
	    }  
	      
}

ButtonFragment

public class ButtonFragment extends Fragment{
	Button myButton;  
    
    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
            Bundle savedInstanceState) {  
        View rootView = inflater.inflate(R.layout.guide_1, container, false);//关联布局文件  
          
        myButton = (Button)rootView.findViewById(R.id.mybutton);//根据rootView找到button  
          
        //设置按键监听事件  
        myButton.setOnClickListener(new View.OnClickListener() {  
              
            @Override  
            public void onClick(View v) {  
                // TODO Auto-generated method stub  
                Toast.makeText(ButtonFragment.this.getActivity(), "button is click!", Toast.LENGTH_SHORT).show();  
            }  
        });  
          
          
        return rootView;  
    }  
}

TestFragment

public class TestFragment extends Fragment{
	 private static final String TAG = "TestFragment";  
	    private String hello;// = "hello android";  
	    private String defaultHello = "default value";  
	  
	    static TestFragment newInstance(String s) {  
	        TestFragment newFragment = new TestFragment();  
	        Bundle bundle = new Bundle();  
	        bundle.putString("hello", s);  
	        newFragment.setArguments(bundle);  
	          
	        //bundle还可以在每个标签里传送数据   
	        return newFragment;   
	    }  

	    @Override  
	    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
	        Log.d(TAG, "TestFragment-----onCreateView");  
	        Bundle args = getArguments();  
	        hello = args != null ? args.getString("hello") : defaultHello;  
	        View view = inflater.inflate(R.layout.guide_2, container, false);  
	        TextView viewhello = (TextView) view.findViewById(R.id.tv);  
	        viewhello.setText(hello);  
	        return view;  
	  
	    }  
}

guide_2.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:orientation="vertical"  
    android:background="#158684" >  
  
    <TextView  
        android:id="@+id/tv"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="TextView" />  
  
</RelativeLayout>

guide_1.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    android:layout_width="fill_parent"    
    android:layout_height="fill_parent"    
    android:background="#ff0000ff" >    
      
    <Button   
        android:id="@+id/mybutton"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="hit me"  
        android:gravity="center"/>  
</RelativeLayout>