Android开发实战(二十一):浅谈android:clipChildren属性

实现功能:

1、APP主界面底部模块栏

2、ViewPager一屏多个界面显示

3、........

首先需要了解一下这个属性的意思 ,即

是否允许子View超出父View的返回,有两个值true 、false  ,默认true

使用的时候给子View和根节点View控件都设置android:clipChildren="false",那么这个子View就不会限制在父View当中

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

下面通过两个项目中经常用到的例子来说明:

1、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>

2、实现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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

android Titlebar一行代码实现沉浸式效果

github地址 一个简单易用的导航栏TitleBar,可以轻松实现IOS导航栏的各种效果  整个代码全部集中在TitleBar.java中,所有控件都动...

1918
来自专栏Android干货

Android项目实战(七):Dialog主题Activity实现自定义对话框效果

1356
来自专栏开发之途

Android Drawable图解

1184
来自专栏Android干货

关于安卓开发选项卡的实现

2827
来自专栏向治洪

SliferMenu详解

SlidingMenu简介: SlidingMenu的是一种比较新的设置界面或配置界面效果,在主界面左滑或者右滑出现设置界面,能方便的进行各种操作.目前有大...

1905
来自专栏何俊林

两步集成TV移动框架,从未如此简单

导读:TV相关的资料网上相对来说少点,我早期写了七篇TV相关的开发总结,有开源了一些Demo,在我的github上,今天是单灿灿同学独家在本公众平台发布他最新开...

4075
来自专栏Android干货园

Android--仿淘宝商品详情(继续拖动查看详情)及标题栏渐变

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/52...

951
来自专栏郭霖

Android自定义View的实现方法,带你一步步深入了解View(四)

不知不觉中,带你一步步深入了解View系列的文章已经写到第四篇了,回顾一下,我们一共学习了LayoutInflater的原理分析、视图的绘制流程、视图的状态及重...

2789
来自专栏向治洪

仿淘宝购买详情页购买缩小动画

偶尔一个时候,我们产品的详情页面也做的和淘宝神识,为了加强 的体验,我们加了一些动画,下面说说淘宝详情的缩放详情页的动画怎么做的吧。 先上两张图, ? ? 其实...

1998
来自专栏积累沉淀

Java SWT事件

什么是事件?点击鼠标是一个事件,按下一个按钮也一个事件,关闭一个窗口也是一个事件。 什么是监听器?监听器就是监听事件什么时候发生的,用来控制事件发生的具体动...

1925

扫码关注云+社区