常用的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