Android開發實戰（二十一）：淺談android:clipChildren屬性

實現功能：

一、APP主界面底部模塊欄

二、ViewPager一屏多個界面顯示

三、........

 

首先須要瞭解一下這個屬性的意思 ，即

是否容許子View超出父View的返回，有兩個值true 、false  ，默認true

使用的時候給子View和根節點View控件都設置android:clipChildren="false"，那麼這個子View就不會限制在父View當中

-------------------------------------------------------------------------------------------------------------

下面經過兩個項目中常常用到的例子來講明：

一、APP主界面底部模塊欄

能夠看出底部其實有一個ViewGroup(LinearLayout or RelativeLayout 灰色背景部分) 

可是咱們要求中間一個圖標按鈕 是要比別的稍大點的，那麼正常的咱們寫在一個LinearLayout中會出現下面這種狀況

由於ViewGroup有高度限制，致使他也限制了它內部子View的高度，很顯然達不到咱們的需求。那麼咱們須要一種屬性來讓子View能夠不受到父容器的限制

這就要用到了android:clipChildren屬性

咱們只須要給 根節點控件 和 不想被父容器限制的子View 設置這個屬性： android:clipChildren="false"  便可

佈局代碼：

<LinearLayout 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"
    android:background="#fff"
    android:clipChildren="false"
    tools:context="com.xqx.com.treat.ui.user.Login">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="horizontal"
        android:layout_gravity="bottom"
        android:background="#ddd"
        >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#0000"
        android:scaleType="fitCenter"
        android:src="@mipmap/ic_launcher"
        />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#0000"
        android:scaleType="fitCenter"
        android:src="@mipmap/ic_launcher"
        />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="65dp"
        android:layout_weight="1"
        android:background="#0000"
        android:layout_gravity="bottom"
        android:scaleType="fitCenter"
        android:src="@mipmap/ic_launcher"
        />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#0000"
        android:scaleType="fitCenter"
        android:src="@mipmap/ic_launcher"
        />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#0000"
        android:scaleType="fitCenter"
        android:src="@mipmap/ic_launcher"
        />
        </LinearLayout>
</LinearLayout>

main

 

二、實現ViewPager一屏多個視圖滾動

詳細見各大APP應用市場 ，應用詳情界面，會有相似圖片滾動來顯示應用功能的部分

首先實現該功能咱們須要瞭解ViewPager,安卓開發_深刻學習ViewPager控件

瞭解ViewPager的同窗都知道，正常狀況下咱們一個手機界面只會顯示出一個viewpager的子View視圖

那麼咱們須要實現一個手機界面能看到多個子View視圖該怎麼辦？

其實很簡單，這裏假設你們都會使用ViewPager而且已經寫出了ViewPager的效果

第一步：

咱們只須要在原來基礎上在佈局文件裏對ViewPager控件和它對應的根控件 添加 android:clipChildren="false"屬性

第二步：

設置ViewPager的左右margin屬性

android:layout_marginRight="80dp"

android:layout_marginLeft="80dp"

設置這兩個屬性的目的是什麼呢？

首先，咱們正常設置ViewPager控件的寬度都是 

android:layout_width="match_parent"

而咱們設置距離左右控件的距離以後，就會使ViewPager可現實的寬度變窄，如圖，藍色框部分就是viewpager可見部分

再加上第一步的設置

最終就出現這樣的狀況：一個界面咱們能夠看到至少2個起的viewpager中的子View（橙色，藍色View視圖）

注意點：該作法會有一個bug，就是隻能滑動中間的那個View，而若是咱們想要點着左邊或者右邊的View滑動怎麼辦？

解決辦法：將父類的touch事件分發至viewPgaer，R.id.ly是ViewPager控件的父容器

findViewById(R.id.ly).setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return viewpager.dispatchTouchEvent(event);
            }
        });

另外，activity代碼中給ViewPager控件動態設置間距也會是效果大大提升

viewpager.setPageMargin(8);

ViewPager滾動效果：

ViewPager切換動畫（3.0版本以上有效果）

效果圖：

佈局文件代碼：

<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" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:background="#fff"
    android:id="@+id/ly"
    android:clipChildren="false"
    tools:context="com.xqx.com.treat.ViewPagerActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:clipChildren="false"
        android:layout_marginRight="80dp"
        android:layout_marginLeft="80dp"
        ></android.support.v4.view.ViewPager>


</RelativeLayout>

View Code