查看更多效果实现

最近在乐视App上面看电影，看见每个视频下面都有一个视频详情，点击查看更多效果,想着实现一个这样的效果。类似下面这种

我的第一反应是自定义一个View出来，然后根据传递的文字长度进行截取显示，但是做的时候发现也可以不用自定义，一种比较投机取巧的方法，一起看看。

首先我们先自定义开始要显示的行数。

private static final int LIMIT = 2;
private int currentLines;
  
currentLines = LIMIT;
desc.setMaxLines(currentLines);
desc.setText("苍井空，1983年11月11日出生于日本东京。日本AV女演员、成人模特，兼电视、电影演员。日本女子组合惠比寿麝香葡萄的初代首领，现成员、OG首领。2010年3月毕业并将组合首领之位交托给麻美由真，同年10月复归。入行前曾是泳装写真女星，2002年进入AliceJapan公司，开始性感影片的拍摄生涯。因为其“童颜巨乳”的特色，开始获得人气，并连续在2003年及2004年蝉联日本《VideoBoy》杂志年度性感女艺人第一名。");

下面我们对内容存放的区域进行高度的计算。

int FULLSIZE = -1;
int THUMBNAIL =-1;
contentView.addOnLayoutChangeListener(new View.OnLayoutChangeListener() <
            @Override
            public void onLayoutChange(View view, int i, int i2, int i3, int i4, int i5, int i6, int i7, int i8) <
                bg.getLayoutParams().height = contentView.getHeight();
                bg.requestLayout();
                if(THUMBNAIL == -1) <
                    THUMBNAIL = contentView.getHeight();
                &#125;

                if(FULLSIZE == -1) <
                    FULLSIZE = THUMBNAIL + getTextViewHeight(desc) - desc.getHeight();
                &#125;
            &#125;
        &#125;);
        
     private int getTextViewHeight(TextView pTextView) <
        Layout layout = pTextView.getLayout();
        int desired = layout.getLineTop(pTextView.getLineCount());
        int padding = pTextView.getCompoundPaddingTop() + pTextView.getCompoundPaddingBottom();
        return desired + padding;
    &#125;

当我们点击按钮的时候会执行一个动画，然后完全展示出来

showDetailButton.setOnClickListener(new View.OnClickListener() <
            @Override
            public void onClick(View view) <

                if(currentLines == LIMIT) <
                    expand(contentView, THUMBNAIL, FULLSIZE);
                &#125; else <
                    expand(contentView, FULLSIZE, THUMBNAIL);
                &#125;

                Animation animation = new RotateAnimation(
                        currentLines == LIMIT ? 0 : 180,
                        currentLines == LIMIT ? 180 : 360,
                        Animation.RELATIVE_TO_SELF,
                        0.5f,
                        Animation.RELATIVE_TO_SELF,
                        0.5f);

                animation.setDuration(300);
                animation.setFillAfter(true);
                showDetailButton.startAnimation(animation);
                contentView.requestLayout();


            &#125;
        &#125;);
        
        public void expand(final View v, final  float originHeight, final float targetHeight) <
        Animation a = new Animation()<
            @Override
            protected void applyTransformation(float interpolatedTime, Transformation t) <
                v.getLayoutParams().height = (int)(originHeight + (targetHeight - originHeight) * interpolatedTime);
                v.requestLayout();
            &#125;

            @Override
            public boolean willChangeBounds() <
                return true;
            &#125;
        &#125;;

        a.setDuration(600);
        a.setFillAfter(true);
        a.setAnimationListener(new Animation.AnimationListener() <
            private boolean maxLineDidSet = false;
            @Override
            public void onAnimationStart(Animation animation) <
                if(currentLines == Integer.MAX_VALUE) <
                    currentLines = LIMIT;
                    desc.setMaxLines(currentLines);
                    maxLineDidSet = true;
                &#125;

            &#125;

            @Override
            public void onAnimationEnd(Animation animation) <
                if(!maxLineDidSet && currentLines == LIMIT) <
                    currentLines = Integer.MAX_VALUE;
                    desc.setMaxLines(currentLines);
                &#125;
            &#125;

            @Override
            public void onAnimationRepeat(Animation animation) <

            &#125;
        &#125;);
        v.startAnimation(a);
    &#125;

基本所有的代码都在这里了，主要就是一个内容区域的高度计算，一个动画的展示。不算完美的实现了展开更多的效果。

除非注明，本博文章均为原创，转载请以链接形式标明本文地址。