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下載