`
iaiai
  • 浏览: 2204040 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Android ViewPager+Fragment 仿 Google Play

 
阅读更多
运行效果如下：



主界面布局文件activity_main.xml 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <RelativeLayout
        android:id="@+id/rl_tab"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#F2F2F2" >

        <com.example.playtabtest.view.SyncHorizontalScrollView
            android:id="@+id/mHsv"
            android:layout_width="fill_parent"
            android:layout_height="40dip"
            android:fadingEdge="none"
            android:scrollbars="none" >

            <RelativeLayout
                android:id="@+id/rl_nav"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="#5AB0EB" >

                <RadioGroup
                    android:id="@+id/rg_nav_content"
                    android:layout_width="fill_parent"
                    android:layout_height="38dip"
                    android:layout_alignParentTop="true"
                    android:background="#F2F2F2"
                    android:orientation="horizontal" >
                </RadioGroup>

                <ImageView
                    android:id="@+id/iv_nav_indicator"
                    android:layout_width="1dip"
                    android:layout_height="5dip"
                    android:layout_alignParentBottom="true"
                    android:background="#5AB0EB"
                    android:contentDescription="@string/nav_desc"
                    android:scaleType="matrix" />
            </RelativeLayout>
        </com.example.playtabtest.view.SyncHorizontalScrollView>

        <ImageView
            android:id="@+id/iv_nav_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/nav_desc"
            android:paddingBottom="1dip"
            android:src="@drawable/iv_navagation_scroll_left"
            android:visibility="gone" >
        </ImageView>

        <ImageView
            android:id="@+id/iv_nav_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/nav_desc"
            android:paddingBottom="1dip"
            android:src="@drawable/iv_navagation_scroll_right"
            android:visibility="visible" >
        </ImageView>
    </RelativeLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_below="@id/rl_tab"
        android:layout_gravity="center"
        android:background="#ffffff"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

</RelativeLayout>

MainActivity.java 
package com.example.playtabtest;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.RelativeLayout;
import com.example.playtabtest.fragment.CommonUIFragment;
import com.example.playtabtest.fragment.LaunchUIFragment;
import com.example.playtabtest.view.SyncHorizontalScrollView;

public class MainActivity extends FragmentActivity {

	public static final String ARGUMENTS_NAME = "arg";
	private RelativeLayout rl_nav;
	private SyncHorizontalScrollView mHsv;
	private RadioGroup rg_nav_content;
	private ImageView iv_nav_indicator;
	private ImageView iv_nav_left;
	private ImageView iv_nav_right;
	private ViewPager mViewPager;
	private int indicatorWidth;
	public static String[] tabTitle = { "选项1", "选项2", "选项3", "选项4", "选项5" };	//标题
	private LayoutInflater mInflater;
	private TabFragmentPagerAdapter mAdapter;
	private int currentIndicatorLeft = 0;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		findViewById();
		initView();
		setListener();
	}

	private void setListener() {
		
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {
				
				if(rg_nav_content!=null && rg_nav_content.getChildCount()>position){
					((RadioButton)rg_nav_content.getChildAt(position)).performClick();
				}
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});
		
		rg_nav_content.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				
				if(rg_nav_content.getChildAt(checkedId)!=null){
					
					TranslateAnimation animation = new TranslateAnimation(
							currentIndicatorLeft ,
							((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft(), 0f, 0f);
					animation.setInterpolator(new LinearInterpolator());
					animation.setDuration(100);
					animation.setFillAfter(true);
					
					//执行位移动画
					iv_nav_indicator.startAnimation(animation);
					
					mViewPager.setCurrentItem(checkedId);	//ViewPager 跟随一起 切换
					
					//记录当前 下标的距最左侧的 距离
					currentIndicatorLeft = ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft();
					
					mHsv.smoothScrollTo(
							(checkedId > 1 ? ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft() : 0) - ((RadioButton) rg_nav_content.getChildAt(2)).getLeft(), 0);
				}
			}
		});
	}

	private void initView() {
		
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		
		indicatorWidth = dm.widthPixels / 4;
		
		LayoutParams cursor_Params = iv_nav_indicator.getLayoutParams();
		cursor_Params.width = indicatorWidth;// 初始化滑动下标的宽
		iv_nav_indicator.setLayoutParams(cursor_Params);
		
		mHsv.setSomeParam(rl_nav, iv_nav_left, iv_nav_right, this);
		
		//获取布局填充器
		mInflater = (LayoutInflater)this.getSystemService(LAYOUT_INFLATER_SERVICE);

		//另一种方式获取
//		LayoutInflater mInflater = LayoutInflater.from(this);  
		
		initNavigationHSV();
		
		mAdapter = new TabFragmentPagerAdapter(getSupportFragmentManager());
		mViewPager.setAdapter(mAdapter);
	}

	private void initNavigationHSV() {
		
		rg_nav_content.removeAllViews();
		
		for(int i=0;i<tabTitle.length;i++){
			
			RadioButton rb = (RadioButton) mInflater.inflate(R.layout.nav_radiogroup_item, null);
			rb.setId(i);
			rb.setText(tabTitle[i]);
			rb.setLayoutParams(new LayoutParams(indicatorWidth,
					LayoutParams.MATCH_PARENT));
			
			rg_nav_content.addView(rb);
		}
		
	}

	private void findViewById() {
		
		rl_nav = (RelativeLayout) findViewById(R.id.rl_nav);
		
		mHsv = (SyncHorizontalScrollView) findViewById(R.id.mHsv);
		
		rg_nav_content = (RadioGroup) findViewById(R.id.rg_nav_content);
		
		iv_nav_indicator = (ImageView) findViewById(R.id.iv_nav_indicator);
		iv_nav_left = (ImageView) findViewById(R.id.iv_nav_left);
		iv_nav_right = (ImageView) findViewById(R.id.iv_nav_right);
		
		mViewPager = (ViewPager) findViewById(R.id.mViewPager);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
	
	public static class TabFragmentPagerAdapter extends FragmentPagerAdapter{

		public TabFragmentPagerAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int arg0) {
			Fragment ft = null;
			switch (arg0) {
			case 0:
				ft = new LaunchUIFragment();
				break;

			default:
				ft = new CommonUIFragment();
				
				Bundle args = new Bundle();
				args.putString(ARGUMENTS_NAME, tabTitle[arg0]);
				ft.setArguments(args);
				
				break;
			}
			return ft;
		}

		@Override
		public int getCount() {
			
			return tabTitle.length;
		}
		
	}

}

SyncHorizontalScrollView.java 
package com.example.playtabtest.view;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;

public class SyncHorizontalScrollView extends HorizontalScrollView {

	private View view;
	private ImageView leftImage;
	private ImageView rightImage;
	private int windowWitdh = 0;
	private Activity mContext;

	public void setSomeParam(View view, ImageView leftImage,
			ImageView rightImage, Activity context) {
		this.mContext = context;
		this.view = view;
		this.leftImage = leftImage;
		this.rightImage = rightImage;
		DisplayMetrics dm = new DisplayMetrics();
		this.mContext.getWindowManager().getDefaultDisplay().getMetrics(dm);
		windowWitdh = dm.widthPixels;
	}

	public SyncHorizontalScrollView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public SyncHorizontalScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}

	// 显示和隐藏左右两边的箭头
	public void showAndHideArrow() {
		if (!mContext.isFinishing() && view != null) {
			this.measure(0, 0);
			if (windowWitdh >= this.getMeasuredWidth()) {
				leftImage.setVisibility(View.GONE);
				rightImage.setVisibility(View.GONE);
			} else {
				if (this.getLeft() == 0) {
					leftImage.setVisibility(View.GONE);
					rightImage.setVisibility(View.VISIBLE);
				} else if (this.getRight() == this.getMeasuredWidth()
						- windowWitdh) {
					leftImage.setVisibility(View.VISIBLE);
					rightImage.setVisibility(View.GONE);
				} else {
					leftImage.setVisibility(View.VISIBLE);
					rightImage.setVisibility(View.VISIBLE);
				}
			}
		}
	}

	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		super.onScrollChanged(l, t, oldl, oldt);
		if (!mContext.isFinishing() && view != null && rightImage != null
				&& leftImage != null) {
			if (view.getWidth() <= windowWitdh) {
				leftImage.setVisibility(View.GONE);
				rightImage.setVisibility(View.GONE);
			} else {
				if (l == 0) {
					leftImage.setVisibility(View.GONE);
					rightImage.setVisibility(View.VISIBLE);
				} else if (view.getWidth() - l == windowWitdh) {
					leftImage.setVisibility(View.VISIBLE);
					rightImage.setVisibility(View.GONE);
				} else {
					leftImage.setVisibility(View.VISIBLE);
					rightImage.setVisibility(View.VISIBLE);
				}
			}
		}
	}
}

以下是两个Fragment的源代码

LaunchUIFragment.java 
package com.example.playtabtest.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.playtabtest.R;

public class LaunchUIFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		
		View rootView = inflater.inflate(R.layout.fragment_selection_launch, container, false);
		
		return rootView;
	}
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
	}
	
}

CommonUIFragment.java 
package com.example.playtabtest.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.playtabtest.MainActivity;
import com.example.playtabtest.R;

public class CommonUIFragment extends Fragment {
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		
		View rootView = inflater.inflate(R.layout.fragment_selection_common, container, false);
		
		TextView tv_tabName = (TextView) rootView.findViewById(R.id.tv_tabName);
		
		Bundle bundle = getArguments();
		
		tv_tabName.setText(bundle.getString(MainActivity.ARGUMENTS_NAME, ""));
		
		return rootView;
	}
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onActivityCreated(savedInstanceState);
	}
	
}

两个Fragment的布局文件

fragment_selection_launch.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:id="@+id/tv_intro"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="16dp"
            android:text="@string/launch_intro"/>
    
    <Button android:id="@+id/bt_click"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:text="@string/launch_click_me"/>

</LinearLayout>

fragment_selection_common.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="300dp"
        android:layout_height="wrap_content"
    	android:textSize="18sp"
    	android:text="@string/common_intro"
        />
    
    <TextView 
        android:id="@+id/tv_tabName"
        android:layout_marginTop="30dp"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_gravity="center"
    	android:textSize="20sp"
        />

</LinearLayout>


源码下载地址：http://download.csdn.net/detail/waterseason/7015755
  • 大小: 23.6 KB
  • 大小: 22.5 KB
分享到：
| Monkey工具
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ViewPager+Fragment-仿GooglePlay 顶部可滑动效果

    在Android开发中，"ViewPager+Fragment-仿GooglePlay 顶部可滑动效果"是一个常见的应用场景，主要用于实现类似Google Play商店的界面布局，其中顶部栏可以水平滑动切换，下方是ViewPager展示的内容。这个设计提供了...

    slidingMenu+viewpager+fragment+listView

    1. SlidingMenu：这是一个开源库，用于在Android应用中实现类似Google Play、Facebook那样的侧滑菜单效果。它允许用户通过从屏幕边缘向内滑动来显示隐藏的菜单，提供了一种优雅的方式来展现更多导航选项。...

    viewpager+fragment的使用Demo

    `ViewPager` 通常用于实现类似卡片堆叠的交互效果，如Google Play商店或Android系统的设置菜单。`ViewPager` 的主要优势在于它可以自动处理页面的加载和销毁，从而优化内存使用。 **关键特性：** - 自动缓存相邻...

    android的viewpager+fragment+listView图片缓存

    在Android开发中，`ViewPager`、`Fragment`和`ListView`是常见的组件，它们结合使用可以构建出丰富多样的用户界面。在这个场景中，我们主要关注如何在`ViewPager`配合`Fragment`展示`ListView`时，高效地处理图片...

    ViewPager+Fragment实现，类似google play，网易新闻客户端

    在Android应用开发中，`ViewPager` 和 `Fragment` 是两个非常关键的组件，它们常用于构建具有滑动页面效果的应用，比如Google Play商店和网易新闻客户端。`ViewPager` 提供了左右滑动浏览多个页面的功能，而`...

    ViewPager+Fragment搭建App菜单主界面

    这通常用于实现类似谷歌Play商店或者许多其他应用的侧滑导航效果。下面将详细讲解这两个组件以及如何结合使用它们。 **ViewPager** ViewPager是Android SDK中的一个视图类，它允许用户水平滑动浏览多个页面。在...

    ViewPager+Fragment+RadioGroup导航

    这种设计模式在许多Android应用中都很常见，例如Google Play商店、设置应用等。 总结起来，`ViewPager+Fragment+RadioGroup`导航是一种强大的工具，它能够帮助开发者创建灵活、可扩展的多页应用界面，提供出色的...

    Fragment + ViewPager 仿 Google Play

    在Android应用开发中，"Fragment + ViewPager 仿 Google Play"是一种常见的实现方式，用于构建具有类似Google Play应用的用户界面。这个设计模式充分利用了Fragment和ViewPager的优势，为用户提供了一个可滑动的多...

    安卓viewpager+slidingmenu+Fragment镶嵌写出的文件管理器项目

    在Android开发中，构建一个功能丰富的文件管理器是一项常见的任务，而这个项目是利用ViewPager、SlidingMenu和Fragment这三个核心组件实现的。下面将详细解释这些知识点及其在项目中的应用。 1. **ViewPager**: ...

    viewpager与fragment配合+左拉抽屉效果sliding+fragment与activity通讯

    在Android应用开发中，Viewpager和Fragment的配合使用已经成为一种常见的设计模式，它使得用户界面更加灵活和互动。本文将详细讲解如何实现标题所描述的功能，包括“viewpager与fragment配合”、“左拉抽屉效果...

    Fragment+ViewPager+SlidingMenu组件实现的demo

    `SlidingMenu`则是一个侧滑菜单库，为Android应用提供了类似Google Play、Instagram等应用那样的左侧或右侧滑动菜单。用户可以通过从屏幕边缘滑动来显示隐藏的菜单，这种设计模式在移动应用中非常常见。`SlidingMenu...

    Android应用源码之Android ViewPager Fragment实现选项卡-IT计算机-毕业设计.zip

    通常，ViewPager被用于实现水平滚动的页面效果，如在Google Play应用商店中看到的那样。每个页面都是一个单独的Fragment，可以独立加载和管理数据。 2. **Fragment**：Fragment是Android应用程序中的一个可重用组件...

    吸顶效果结合tab+viewpage+fragment.zip

    3. **ViewPager**：这是一个用于展示可滑动页面的组件，常用于实现类似Instagram或Google Play应用的水平滑动效果。ViewPager可以与PagerAdapter一起使用，允许用户左右滑动查看不同的页面内容。 4. **Fragment**：...

    侧滑菜单+ViewPager

    这种设计模式在许多流行的Android应用中都能看到，如Google Play、Facebook等。理解并熟练掌握侧滑菜单+ViewPager+Fragment的组合，对于Android开发者来说是非常重要的技能，能提高应用的用户体验和功能完整性。

    Android ViewPager-实现左右两个屏幕的切换.zip源码资源下载

    这在很多应用中都非常常见，比如Google Play、新闻阅读应用等。 实现ViewPager的基本步骤如下： 1. **设置Adapter**：ViewPager需要一个PagerAdapter作为数据源，为每个页面提供View。PagerAdapter是一个抽象类，...

    一行代码实现ViewPager卡片效果

    在Android开发中，创建引人注目的用户界面是至关重要的，而卡片效果（CardView）是一种常见的设计元素，常用于展示信息或者实现滑动浏览的效果，例如Google Play商店中的应用推荐。标题提到的一行代码实现ViewPager...

    侧滑菜单+viewpager

    这种设计模式在许多流行的Android应用中都能看到，如Google Play商店、Gmail等，因为它既实用又易于操作。在实际项目中，还可以根据需要自定义动画效果、添加手势识别等增强功能，进一步提升用户体验。

    fragment跟ViewPager

    例如，Google Play商店的应用详情页面就是一个典型的例子，它用ViewPager展示了应用截图、描述等多个部分，每个部分都是一个独立的Fragment。在处理这种场景时，注意处理好Fragment的生命周期，以及在Fragment和...

    android_viewPagerdemo

    ViewPager是Android Support Library中的一个控件，它能够帮助我们实现类似Google Play商店那样的多页面滑动浏览效果。这个组件通常与PagerAdapter一起使用，PagerAdapter负责管理页面的创建和销毁，以达到高效利用...

    Android ViewPager 的使用总结

    这种组件常用于实现Tab切换效果或者在有限的屏幕空间内展示多个页面，比如Google Play应用中的应用分类页。以下是使用ViewPager的一些关键知识点： 1. **基本结构**： - `Activity`：主应用程序窗口，通常会包含...

Magicbox
Global site tag (gtag.js) - Google Analytics