美文网首页Android日记Android开发学习我的Andorid 收藏
CollapsingImgText 头像和姓名移动、缩小,固定在

CollapsingImgText 头像和姓名移动、缩小,固定在

作者: 区区一只yamada | 来源:发表于2017-04-28 16:36 被阅读472次
    andnroid1.jpg

    在有些开发中需要做到头像和姓名一起移动缩小到title上。大家可能会想到使用design架包中的 CollapsingToolbarLayout来实现, 但很遗憾,这个控件只支持文字移动缩小。

    当然现在我们可以使用 CollapsingImageText控件来实现, 这个控件可以支持头像和名字一起移动,效果图:


    collapsing.gif

    导入架包:

    compile 'com.yahui:collapsingImageText:0.1.4'
    

    使用方法:

    该控件必须嵌套在AppBarLayout中使用,否则没有效果。
    由于这个控件继承了RelativeLayout实现, 所以 你可以使用相对布局的任何属性。

    <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:theme="@style/AppTheme.AppBarOverlay">
    
            <com.yahui.collapsingimagetext.CollapsingImageTextLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:title_id="@+id/test_title"
                app:text_id="@+id/test_text"
                app:text_scale="0.6"
                app:text_margin_left="50dp"
                app:img_id="@+id/test_img"
                app:img_margin_left="10dp"
                >
                <TextView
                    android:id="@+id/test_title"
                    android:layout_width="match_parent"
                    android:layout_height="45dp"
                    android:background="@android:color/holo_blue_light"
                    android:gravity="center"
                    android:text="title is here"
                    />
    
                <ImageView
                    android:id="@+id/test_img"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:scaleType="fitXY"
                    android:src="@mipmap/ic_launcher"
                    android:layout_centerVertical="true"
                    android:layout_marginTop="30dp"
                    android:layout_marginLeft="20dp"
                    />
    
                <TextView
                    android:id="@+id/test_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/test_img"
                    android:text="MoveText"
                    android:textSize="20sp"
                    android:layout_marginTop="30dp"
                    android:layout_marginLeft="30dp"
                    android:layout_centerVertical="true"
                    />
    
            </com.yahui.collapsingimagetext.CollapsingImageTextLayout>
           
        </android.support.design.widget.AppBarLayout>
    

    Xml配置说明

        app:title_id="@+id/test_title"  //指定title View
        app:text_id="@+id/test_text"    //指定姓名view
        app:text_scale="0.6"            //姓名view缩小的倍数
        app:text_margin_left="50dp"     //姓名view在titleView 中的左边距
        app:text_margin_top="10dp"      //姓名view在titleView 中的上边距
        app:img_id="@+id/test_img"      // 指定头像View
        app:img_scale="0.6"             //头像View缩小的倍数
        app:img_margin_left="10dp"      //头像View在titleView 中的左边距
        app:img_margin_top="10dp"       //头像View在titleView 中的上边距
    

    java 调用方法

    setImgTitleMarginTop(int top)
        
     setImgTitleMarginLeft(int left)
        
     setTextTitleMarginTop(int top) ;
        
     setImgTextMarginLeft(int left) ;
    
     setStateBarHeight(int stateBarHeight);//设置状态栏高度
    

    如果你在 AppBarLayout 中的xml文件中 指定了android:fitsSystemWindows="true",
    这个时候你也许需要调用setStateBarHeight(int stateBarHeight); 方法来设置状态栏的高度。

    GitHub地址

    https://github.com/hu5080126/CollapsingImgText

    相关文章

      网友评论

      • 久長朲道莫:你好 我想请教一下那个展开的AppBarLayout在向上拖动的时候有时候会发生冲突 下面那块布局就会一直抖动 然后慢慢上去这是什么问题呢?
        久長朲道莫:@区区一只yamada 好的
        区区一只yamada:方便加下我 qq 334972901 ,给我看看具体的原因吗?

      本文标题:CollapsingImgText 头像和姓名移动、缩小,固定在

      本文链接:https://www.haomeiwen.com/subject/fuqazttx.html