常用的View（一）——标题栏渐变、伸缩的TextView、圆形头像、选图截图等功能的实现

本例主要汇总了一些常用的view，如

• 标题栏随滚动逐渐显现
• 自动轮播图
• 圆形头像
• 可伸缩的TextView
• 选取相机中的图片并截图

demo示例：

下面分别介绍这些功能的实现：

滚动屏幕标题栏渐变

根据屏幕的滚动，顶部标题栏逐渐由完全透明变成完全不透明

实现原理：设置滚动监听，不断更新标题栏的透明度

规则：

• 当头布局处于完全显示状态，设置标题栏透明度为完全透明
• 当头布局处于完全显示和完全隐藏之间，动态设置标题栏透明度
• 当头布局处于完全隐藏状态，设置标题栏透明度为完全不透明

主要代码

View headView = View.inflate(this, R.layout.auto_scrollview, null);
//listview添加头布局（轮播图）
listview.addHeaderView(headView);
//listview设置滚动监听
listview.setOnScrollListener(new TitleOnScrollListener());

class TitleOnScrollListener implements AbsListView.OnScrollListener {

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

    }

    /**
     * 当listview滚动时回调
     *
     * @param view
     * @param firstVisibleItem
     * @param visibleItemCount
     * @param totalItemCount
     */
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if (firstVisibleItem == 0) {//当第一个显示的Item为0时（即轮播图显示时）
            // 获取头布局
            View headView = listview.getChildAt(0);
            if (headView != null) {
                // 获取头布局现在的最上部的位置的相反数（即头布局滑出屏幕的高度）
                int top = -headView.getTop();
                // 获取头布局的高度
                int headerHeight = headView.getHeight();
                // 满足这个条件的时候，即是头布局未完全显示，只有这个时候，我们才调整透明度
                if (top <= headerHeight && top >= 0) {
                    // 获取当前位置占头布局高度的百分比
                    float f = (float) top / (float) headerHeight;

                    float temp;
                    if (f < 0.7f) {
                        temp = 1.43f * f;
                    } else {
                        temp = 1;
                    }
                    //设置头布局的透明度
                    rl_title.getBackground().setAlpha((int) (temp * 255));

                    // 通知标题栏刷新显示
                    rl_title.invalidate();
                }
            }
        } else if (firstVisibleItem > 0) {
            //当轮播图完成显示就将标题栏透明度设为完全不透明
            rl_title.getBackground().setAlpha(255);
        } else {
            //将标题栏设为完全透明
            rl_title.getBackground().setAlpha(0);
        }
    }
}

轮播图

这里用到了github上的一个自动轮播图框架android-auto-scroll-view-pager,具体的使用方法可以看我之前的一篇博客android-auto-scroll-view-pager-master的使用,这里就不再赘述。

可伸缩的TextView

这里使用的github上的一个开源框架ExpandableTextView，使用方法也非常简单

1.在build.gradle中添加

dependencies {
    compile 'com.ms-square:expandableTextView:0.1.4'
}

2.在布局文件中定义

<com.ms.square.android.expandabletextview.ExpandableTextView
     xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:expandableTextView="http://schemas.android.com/apk/res-auto"
      android:id="@+id/expand_text_view"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      expandableTextView:maxCollapsedLines="4"
      expandableTextView:animDuration="200">
      <TextView
          android:id="@id/expandable_text"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginLeft="10dp"
          android:layout_marginRight="10dp"
          android:textSize="16sp"
          android:textColor="#666666" />
      <ImageButton
          android:id="@id/expand_collapse"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:padding="16dp"
          android:layout_gravity="right|bottom"
          android:background="@android:color/transparent"/>
  </com.ms.square.android.expandabletextview.ExpandableTextView>

注意：（笔者在使用过程中发现ExpandableTextView的父布局必须是LinearLayout，并且方向必须是vertical才会起作用，如果错误，请指正）

另外，这里的TextView和ImageButton必须设置为”@id/expandable_text”和”@id/expand_collapse”

使用expandableTextView属性要先添加
xmlns:expandableTextView=”http://schemas.android.com/apk/res-auto”

同时还有一些属性需要注意

• maxCollapsedLines：当TextView收缩时最大显示text的行数，默认为8行
• animDuration：当TextView展开和收缩时，动画持续时间，默认300ms
• animAlphaStart:动画开始时的透明度，默认为0.7，如果不想要透明度的变化，可以设为1
• expandDrawable：收缩后显示的图片，不设置则默认显示的向下箭头
• collapseDrawable：展开后显示的图片，不设置则默认显示向上的箭头

3.代码中使用（非常简单，直接初始化后设置文本就可以了）：

ExpandableTextView expTv1 = (ExpandableTextView) rootView.findViewById(R.id.sample1)
                .findViewById(R.id.expand_text_view);

expTv1.setText(getString(R.string.dummy_text1));

圆形头像

这里还是用到了github上的一个开源框架CircleImageView，使用时只需要在布局文件中定义就行了

<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/civ_portrait"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginLeft="10dp"
    android:src="@drawable/pic_null"
    app:civ_border_color="#FF000000"
    app:civ_border_width="2dp" />
    <!-- civ_border_color 代码边框的颜色--!>
    <!-- civ_border_width 边框的宽度--!>

在代码中使用就和ImageView一样

civ_portrait.setImageResource(R.drawable.pic_null);

选取图片&截图

这里用的是github上的android-crop，非常好用的一个图片截取框架，并且自带了选择手机中图片等功能，使用方法也非常简单

1.在manifest中添加如下代码

    <activity android:name="com.soundcloud.android.crop.CropImageActivity" />

2.在build.gradle中添加

    compile 'com.soundcloud.android:android-crop:1.0.1@aar'

3.进入选择图片的Activity,这里是通过隐式意图启动(new Intent(Intent.ACTION_GET_CONTENT).setType(“image/*”))

Crop.pickImage(activity)

4.裁剪的方法

//保存路径
Uri destination = Uri.fromFile(new File(getCacheDir(), "cropped"));
Crop.of(source, destination).asSquare().start(this);

5.裁剪后的回调，可以在这里进行一些操作

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent result) {
    if (requestCode == Crop.REQUEST_CROP && resultCode == RESULT_OK) {
        //可以通过setImageURI设置图片
        imageView.setImageURI(result.getData());
    }
}

本demo中实现主要代码如下：

getView()方法中，设置点击监听，裁剪图片

holder.civ_portrait.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //进入选择图片裁剪的Activity
                Crop.pickImage(MainActivity.this);
                //记录当前点击的位置
                clickPos = position;
            }
        });

//解决头像的复用问题，设置默认的头像
holder.civ_portrait.setImageResource(R.drawable.pic_null);
   if (output != null && clickPos == position) {
            holder.civ_portrait.setImageURI(output);
   }

回调方法

    /**
     * 裁剪后的回调
     *
     * @param requestCode
     * @param resultCode
     * @param result
     */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent result) {
        if (requestCode == Crop.REQUEST_PICK && resultCode == RESULT_OK) {
            beginCrop(result.getData());
        } else if (requestCode == Crop.REQUEST_CROP) {
            handleCrop(resultCode, result);
        }
    }


    private void beginCrop(Uri source) {
        Uri destination = Uri.fromFile(new File(getCacheDir(), "cropped"));
        Crop.of(source, destination).asSquare().start(this);
    }

    private Uri output;

    private void handleCrop(int resultCode, Intent result) {
        if (resultCode == RESULT_OK) {
            output = Crop.getOutput(result);
            if (adapter != null) {
                adapter.notifyDataSetChanged();//更新列表
            }

        } else if (resultCode == Crop.RESULT_ERROR) {
            Toast.makeText(this, Crop.getError(result).getMessage(), Toast.LENGTH_SHORT).show();
        }
    }

demo下载地址
http://download.csdn.net/detail/benhuo931115/9485511