ScrollView + viewpager实现android的app主界面效果

ScrollView + viewpager实现android的app主界面效果

Android的主界面一般由两部分组成:导航栏,滑动的分屏(我自己这么叫的)。其中滑动的分屏肯定是用的fragment,具体的承载的控件是viewpager。而导航分页栏用的控件就有很多了,tabhost,Scrollview或者自定义的都行。

个人认为tabhost和Scrollview都是比较好的,因为后期的可拓展性比较好,除非导航栏界面确实属于”自定义”范畴,基本上我们可以选择这两样就可以了。

其实现的效果是:

当然效果demo中scrollview下面有一条蓝色的线,左右有箭头,这都是另外实现的。实现的效果较为简单。

一、实现scrollview的xml布局代码:

实现的scrollview的xml代码:

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

        <com.example.viewpager_fragment_demo.view.SyncHorizontalScrollView
           android:id="@+id/mHsv"
           android:layout_width="fill_parent"
           android:layout_height="58dip"
           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="58dip"
                    android:layout_alignParentTop="true"
                    android:background="#F2F2F2"
                    android:orientation="horizontal">
                </RadioGroup>

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

        <com.example.viewpager_fragment_demo.view.SyncHorizontalScrollView
           android:id="@+id/mHsv"
           android:layout_width="fill_parent"
           android:layout_height="58dip"
           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="58dip"
                    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.viewpager_fragment_demo.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: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.viewpager_fragment_demo.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>

在源码中,通过自动增删radiogroup来动态维护,下面的imageview即@+id/iv_nav_indicator,就是用来实现下滑line提示的,左右的两个imageview分布两侧。

二、scrollview中可动态增删的源代码实现:

在源码中,具体的增删radiogroup可参考下面的代码:

public classMainActivity extends FragmentActivity {

    public static final String ARGUMENTS_NAME= "arg";
    private RelativeLayout rl_nav;
    privateSyncHorizontalScrollView 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; // 指示器宽度

    private LayoutInflater mInflater;
    private TabFragmentPagerAdaptermAdapter;
    private int currentIndicatorLeft= 0;
    public static String[] tabTitle = { "选项1", "选项2", "选项3", "选项4", "选项5",
           };// 标题

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

    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);
    }

    private void initView() {
       DisplayMetricsdm = newDisplayMetrics();
       getWindowManager().getDefaultDisplay().getMetrics(dm);// 获取屏幕信息
       indicatorWidth = dm.widthPixels / 4;// 指示器宽度为屏幕宽度的4/1

       LayoutParamscursor_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,
              dm.widthPixels);
       // 获取布局填充器
       mInflater = (LayoutInflater) this
              .getSystemService(LAYOUT_INFLATER_SERVICE);

       initNavigationHSV();

       mAdapter = newTabFragmentPagerAdapter(getSupportFragmentManager());
       mViewPager.setAdapter(mAdapter);
    }

    private void initNavigationHSV() {

       rg_nav_content.removeAllViews();

       for (int i = 0; i < tabTitle.length; i++) {

           RadioButtonrb = (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);
       }
    }

    public class TabFragmentPagerAdapterextendsFragmentPagerAdapter {

       publicTabFragmentPagerAdapter(FragmentManager fm) {
           super(fm);
       }

       @Override
       public Fragment getItem(int arg) {
           Fragmentft = null;
           switch (arg) {
           case 0:
              ft= newLaunchUIFragment();
              break;
           case 2:
              ft= newSpecialUIFragment(MainActivity.this);
              break;
           default:
              ft= newCommonUIFragment();

              Bundleargs = newBundle();
              args.putString(ARGUMENTS_NAME,tabTitle[arg]);
              ft.setArguments(args);
              break;
           }
           return ft;
       }

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

    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 voidonPageScrollStateChanged(int arg0) {

           }
       });
       rg_nav_content
              .setOnCheckedChangeListener(newOnCheckedChangeListener() {

                  @Override
                  public voidonCheckedChanged(RadioGroup group, int checkedId) {

                     if (rg_nav_content.getChildAt(checkedId)!= null){

                         TranslateAnimationanimation = newTranslateAnimation(
                                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);
                     }
                  }
              });
    }
}

三、viewpager的xml布局实现:

而配合下面的viewpager,主要是承载fragment。因此是比较简单的。看布局:

<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"/>

四、自定义横向滑动scrollview的小箭头提示的源码实现:

在源码中看它的实现也可参考上面的代码。其中自定义的横向滑动scrollview中主要是处理在scrollview横向滑动时,左右两个小箭头隐藏与显示的情况。可参考下面的代码:

public classSyncHorizontalScrollView extends HorizontalScrollView {

    publicSyncHorizontalScrollView(Context context) {
       super(context);
    }

    publicSyncHorizontalScrollView(Context context, AttributeSet attrs) {
       super(context, attrs);
    }

    publicSyncHorizontalScrollView(Context context, AttributeSet attrs,
           int defStyle) {
       super(context, attrs,defStyle);
    }

    private View view;
    private ImageView leftImage;// 左标图片
    private ImageView rightImage;// 右标图片
    private int windowWitdh = 0;// 屏幕宽度
    private Activity mContext;

    public void setSomeParam(View view,ImageView iv_nav_left,
           ImageViewiv_nav_right, Activity context, int widthPixels) {
       this.view = view;
       this.mContext = context;
       this.leftImage = iv_nav_left;
       this.rightImage = iv_nav_right;
       this.windowWitdh = widthPixels;
    }

    @Override
    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);
              }elseif(view.getWidth()- l == windowWitdh){
                  leftImage.setVisibility(View.VISIBLE);
                  rightImage.setVisibility(View.GONE);
              }else{
                  leftImage.setVisibility(View.VISIBLE);
                  rightImage.setVisibility(View.VISIBLE);
              }
           }
        }
    }

}

基本上到这里,scrollview+ viewpager实现android主界面的效果就算是达到了。下滑line的转动对应的是上面的代码中:rg_nav_content .setOnCheckedChangeListener地方,至此基本可以完成了。

上述源码demo下载

时间: 2024-10-12 23:53:46

ScrollView + viewpager实现android的app主界面效果的相关文章

Android应用经典主界面框架之二:仿网易新闻客户端、CSDN 客户端 (Fragment ViewPager)

第二种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表,使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View,而是Fragment.所以适配器不能继承PagerAdapter,而要继承FragmentPagerAdapter,这是在android.support.v4.app.FragmentPagerAdapter包里的.有点奇葩的是,FragmentPagerAdapter只在这个包里有,在android.app.*这个包下面么

Android学习系列(23)--App主界面实现

在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下最终的界面设计图:    上面顶部是一个9patch背景图片+标题文字:下面底部是5个tab标签,表示应用的5大模块.中间内容部分则是各个模块的具体内容,可以再分类,或者直接显示内容. 2.准备素材按照上篇文章的界面,我们需要事先提供两大方面的素材:顶部+底部.顶部的素材非常简单,最重要的是背景(9patch

安卓开发_慕课网_Fragment实现Tab(App主界面)

学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信)的图标为亮,其他三个为暗 2.点击相应的按钮,首先将所有的图标变暗,接着隐藏所有Fragment,再把点击的对应的Fragment显示出来,并把相应的图标显示亮 首先布局文件 activity_main.xml与ViewPager实现Tab的是不一样的 1 <LinearLayout xmlns:

多种多样的App主界面Tab实现方法

看了一下App主界面Tab实现方法,总结一下: 再看看实现的效果图:                            第一种:ViewPager实现Tab: 思路:1.布局方面实现顶层和底层布局,中间是ViewPager实现的.中间是四个布局实现的,List<View>                 2.实现:setOnPageChangeListener内部类                3.需要一个适配器:PagerAdapter 源代码如下: <span style=&q

Android应用经典主界面框架之一:仿QQ (使用Fragment, 附源码)

最近反复研究日常经典必用的几个android app,从主界面带来的交互方式入手进行分析,我将其大致分为三类.今天记录第一种方式,即主界面下面有几个tab页,最上端是标题栏,tab页和tab页之间不是通过滑动切换的,而是通过点击切换tab页.早期这种架构一直是使用tabhost+activitygroup来使用,随着fragment的出现及google官方也大力推荐使用fragment,后者大有代替前者之势.本文也使用fragment进行搭建,标题中的"经典"指这种交互经典,非本文的代

Android应用经典主界面框架之二:仿网易新闻client、CSDN client (Fragment ViewPager)

另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所以适配器不能继承PagerAdapter,而要继承FragmentPagerAdapter,这是在android.support.v4.app.FragmentPagerAdapter包里的.有点奇葩的是,FragmentPagerAdapter仅仅在这个包里有,在android.app.*这个包以

Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager

文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager 1.使用ViewPager + PagerAdapter 每个页面的内容都在一个Activity中,维护起来会比较麻烦 2.FragmentManager + Fragment 每个页面的内容分开,但是只能点击按钮换页 3.ViewPager + FragmentPagerAdapter 综合前两种方式,比较好 4.TabPageIndicator + ViewPager

66、多种多样的App主界面Tab(1)------ ViewPager实现Tab

1 <?xml version="1.0" encoding="utf-8"?> 2 <!-- bottom.xml --> 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:layout_width="match_parent" 5 android:layout_height=

[android] 新闻客户端主界面部分

当我们使用activity加fragment的时候,每个界面都要建立一个fragment,每个fragment里面都要重写onCreate(),onCreateView(),onActivityCreated(),方法,我们新建一个基类BaseFragment来重写这些方法 BaseFragment需要定义一个抽象方法initView(),用来初始化View对象,需要子类去实现,我们父类把LayoutInflater对象传进去 BaseFragment需要定义一个抽象方法initData(),用