• 用开源项目ExpandableTextView打造可以下拉扩展的TextView


    这次还是用开源项目来实现效果,我个人觉得上面的这个效果还是很赞的。于是就记录下如何实现这个效果,其实相当简单。这就是开源项目写的好的例子,整个开源项目的代码十分清晰,逻辑和代码结构都很棒,接入自己的工程也十分方便,10分钟之内搞定。

    一、下载开源项目,导入lib

    项目地址:https://github.com/Manabu-GT/ExpandableTextView

    这个项目是用Android Studio编写的,如果你是用eclipse来构建,就需要做一些修改。如果懒得修改,就用我在本文末尾分享的源码吧。

    二、在xml中放入控件

    这个在点击后可以展开的控件叫做:ExpandableTextView,同样是一个自定义控件,使用方式自然是放在xml中啦。只要记得写写命名空间:xmlns:expandableTextView="http://schemas.android.com/apk/res-auto"

    <com.ms.square.android.expandabletextview.ExpandableTextView
            android:id="@+id/expand_text_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            expandableTextView:maxCollapsedLines="8"
            expandableTextView:animAlphaStart="1">
    
            <TextView
                android:id="@id/expandable_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:fontFamily="sans-serif-light"
                android:textSize="16sp"
                android:textColor="#666666" />
    
            <ImageButton
                android:id="@id/expand_collapse"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:layout_gravity="right|bottom"
                android:background="@android:color/transparent"/>
        </com.ms.square.android.expandabletextview.ExpandableTextView>

    Note:如果你没有特殊需求,请不要随便删除这里面的textView和ImageView。而且请务必保证这两个控件的id是:expandable_text,expand_collapse。

    我们现在可以看出,这个控件其实就是一个容器,包含了这两个view,编辑器中的预览图如下:

    如果你的eclipse提示预览图出现错误,无法加载drawable什么的,重启一下就好了。因为这里用到了lib中默认的箭头(右下角的图片)

    三、在xml中设置控件

    我们先来看看这个自定义控件可以设置的属性

    3.1 ExpandableTextView

    Also, you can optionally set the following attributes in your layout xml file to customize the behavior of the ExpandableTextView.

    • maxCollapsedLines (defaults to 8) The maximum number of text lines allowed to be shown when the TextView gets collapsed

    • animDuration (defaults to 300ms) Duration of the Animation for the expansion/collapse

    • animAlphaStart (defaults to 0.7f) Alpha value of the TextView when the animation starts (NOTE) Set this value to 1 if you want to disable the alpha animation.

    • expandDrawable Customize a drawable set to ImageButton to expand the TextView

    • collapseDrawable Customize a drawable set to ImageButton to collapse the TextView

    maxCollapsedLines:textView在收起后还能展示的行数,默认值是8,这里的8是8行的意思

    animDuration:动画持续时间,设置点击后textView展开的动画时间,默认是300,单位ms。这个不建议修改

    animAlphaStart:动画开始的透明度,点击后textview会从这个透明度开始慢慢变到不透明,默认是0.7f。我建议修改为1(不透明),保证不会出现闪烁

    expandDrawable:右下角的imageview在textView展开时显示的图片,是drawable类型

    collapseDrawable:右下角imageview在textView收起时展示的图片,是drawable类型

    题外话:虽然这里面可以通过xml属性进行设置,但它没有提供完善的java代码设置方案,所以如果真的需要可以自定在源码中进行添加。

    3.2 TextView

    这个开源项目做的好的一点就是最大限度的引用了现有的控件,这里显示文字的仍旧是textview,我们可以很方便的进行操作。而外层的ExpandableTextView就是一个容器,对textview进行修改。

          <TextView
                android:id="@id/expandable_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:fontFamily="sans-serif-light"
                android:textSize="16sp"
                android:textColor="#666666" />

    这里可以设置文字的颜色等,至于fontFamily我多说一句,它是设置字体的属性,如果没有用这个属性,那么就会采用系统默认的,如果像上述一样用了无衬线细字体,那么就会如下面右图所示

      

    android:fontFamily="sans-serif" // roboto regular android:fontFamily="sans-serif-light" // roboto light android:fontFamily="sans-serif-condensed" // roboto condensed android:fontFamily="sans-serif-thin" // roboto thin (android 4.2) android:fontFamily="sans-serif-medium" // roboto medium (android 5.0)

    in combination with

    android:textStyle="normal|bold|italic"

    this 14 variants are possible:

    • Roboto regular
    • Roboto italic
    • Roboto bold
    • Roboto bold italic
    • Roboto-Light
    • Roboto-Light italic
    • Roboto-Thin
    • Roboto-Thin italic
    • Roboto-Condensed
    • Roboto-Condensed italic
    • Roboto-Condensed bold
    • Roboto-Condensed bold italic
    • Roboto-Medium
    • Roboto-Medium italic

    from:http://stackoverflow.com/questions/12128331/how-to-change-fontfamily-of-textview-in-android/12128448

    四、在Java代码中使用

    使用方式和textview一样,没社么可以多说的。如果是在listView中使用,就把它当一个view放进去就好了,具体可以参考项目提供的demo

    package com.example.test;
    
    import com.ms.square.android.expandabletextview.ExpandableTextView;
    
    import android.app.Activity;
    import android.os.Bundle;
    
    public class MainActivity extends Activity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            ExpandableTextView expTv = (ExpandableTextView) findViewById(R.id.expand_text_view);
            //expTv.setText("hello world");
            expTv.setText(getString(R.string.android5_0_text));
        }
    
    }

    strings.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <string name="app_name">Test</string>
        <string name="hello_world">Hello world!</string>
        <string name="android5.0_text">谷歌对各版本的系统安装量进行了追踪,去年12月,Android 4.4 KitKat系统的份额从33.9(百分之)升至39.1(百分之),而Android 5.0甚至没有出现在榜单上。
            需要注意的是,谷歌在报告中并没有对份额低于0.1(百分之)的系统进行统计。两 年前发布的Android 4.3 Jelly Bean系统依然占据主导地位,份额为 46(百分之),Android 4.0 Ice Cream Sandwich的
            份额为6.7(百分之),Android 2.3 Gingerbread的份额为 7.8(百分之),Android 2.2 Froyo的份额为0.4(百分之)。尽管很多用户尚未用上Android 5.0系统,但这并不妨碍 谷歌的更新不发。消息称,谷歌可能
            会在今年2月发布Android 5.1,更新包括:Android 5.0中缺失的静音模式被重新加入;系统稳定性提 升;改进内存管理性能;修复应用突然关闭问题;修复使用Wi-Fi时网络设备过度消耗问题;修复
            无线网络连接问题。</string>
    
    </resources>

    五、多说一句

    最后想分享下这个效果实现的思路,view在绘制过程中会有自己的大小,而我们可以通过给view添加动画的方式来让其变化大小,在其变化大小的时候与他相邻的view也会被挤压,这就是listview中出现点击textview展开后,下方view被压的原因。归根结底,我们的实现思路是方式view到屏幕中,点击后view会出现动画,让自己的大小真正发生改变,在改变的时候要对textview进行绘制,这样才能出现现在的效果。所以,很多看起来高大上的东西,我们如果细细分析,会发现原理其实很简单。我们也是可以实现的,只不过别人已经做好了,我们就不要重复造轮子了。

    源码下载:http://download.csdn.net/detail/shark0017/8346821

     

  • 相关阅读:
    hihoCoder#1128 二分·二分查找
    hihoCoder#1127 二分图三·二分图最小点覆盖和最大独立集
    hihoCoder#1122 二分图二•二分图最大匹配之匈牙利算法
    hihoCoder#1105 题外话·堆
    Ajax详细剖析
    web框架之--Tornado
    web框架之--先来个介绍
    前端之--Jquery-玩穿它!
    前端之--DOM详解应用
    前端之--JavaScript作用域--超细讲解
  • 原文地址:https://www.cnblogs.com/tianzhijiexian/p/4214577.html
Copyright © 2020-2023  润新知