今天看Google-Simple-Topeka中项目中比较实用的图片选择自定义控件。选中后有个小的边框效果。界面简洁的不得了 ,有兴趣可以直接去看项目源码,这边做了小的抽取总结
这里写图片描述自定义实现:
/**
* A simple view that wraps an avatar.
*/
public class AvatarView extends ImageView implements Checkable {
private boolean mChecked;
private static final int NOT_FOUND = 0;
public AvatarView(Context context) {
this(context, null);
}
public AvatarView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public AvatarView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AvatarView, defStyle, 0);
try {
final int avatarDrawableId = a.getResourceId(R.styleable.AvatarView_avatar, NOT_FOUND);
if (avatarDrawableId != NOT_FOUND) {
setAvatar(avatarDrawableId);
}
} finally {
a.recycle();
}
}
@Override
public void setChecked(boolean b) {
mChecked = b;
invalidate();
}
@Override
public boolean isChecked() {
return mChecked;
}
@Override
public void toggle() {
setChecked(!mChecked);
}
/**
* Set the image for this avatar. Will be used to create a round version of this avatar.
*
* @param resId The image's resource id.
*/
@SuppressLint("NewApi")
public void setAvatar(@DrawableRes int resId) {
if (ApiLevelHelper.isAtLeast(Build.VERSION_CODES.LOLLIPOP)) {
setClipToOutline(true);
setImageResource(resId);
} else {
setAvatarPreLollipop(resId);
}
}
private void setAvatarPreLollipop(@DrawableRes int resId) {
Drawable drawable = ResourcesCompat.getDrawable(getResources(), resId,
getContext().getTheme());
BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
@SuppressWarnings("ConstantConditions")
RoundedBitmapDrawable roundedDrawable = RoundedBitmapDrawableFactory.create(getResources(),
bitmapDrawable.getBitmap());
roundedDrawable.setCircular(true);
setImageDrawable(roundedDrawable);
}
@Override
protected void onDraw(@NonNull Canvas canvas) {
super.onDraw(canvas);
if (mChecked) {
Drawable border = ContextCompat.getDrawable(getContext(), R.drawable.selector_avatar);
border.setBounds(0, 0, getWidth(), getHeight());
border.draw(canvas);
}
}
@Override
@SuppressLint("NewApi")
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (ApiLevelHelper.isLowerThan(Build.VERSION_CODES.LOLLIPOP)) {
return;
}
if (w > 0 && h > 0) {
setOutlineProvider(new RoundOutlineProvider(Math.min(w, h)));
}
}
}
attrs.xml 自定义属性
<resources>
<declare-styleable name="AvatarView">
<attr name="avatar" format="reference" />
</declare-styleable>
</resources>
select_avatar.xml 定义了一个shape选中后的边界效果
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="@dimen/stroke_width_avatar"
android:color="@color/topeka_primary" />
<solid android:color="@android:color/transparent" />
</shape>
使用: AvatarView 控件全路径
<com.google.samples.apps.topeka.widget.AvatarView
android:id="@+id/avatar"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="@dimen/size_fab"
android:layout_height="@dimen/size_fab"
android:layout_gravity="center"
android:contentDescription="@string/an_avatar" />
代码中具体使用:
.......
private List<int> mAvatars = new ArrayList<int>();
mAvatars.add(R.drawable.icon1);
mAvatars.add(R.drawable.icon2);
.......
AvatarView mIcon=(AvatarView)findviewbyid(R.id.avatar);
mIcon.setAvatar(avatars[position]);
网友评论