一、实现

 

1.自定义一个圆角图片控件（也可直接使用第三方框架）

 

由于是一些简单的绘制，就不一一介绍了，直接上代码。

 

public class MellowImageView extends ImageView {

 

    private Paint paint;

 

    public MellowImageView（Context context） {

 

        super（context）;

 

    }

 

    public MellowImageView（Context context, @Nullable AttributeSet attrs） {

 

        super（context, attrs）;

 

    }

 

    public MellowImageView（Context context, @Nullable AttributeSet attrs, int defStyleAttr） {

 

        super（context, attrs, defStyleAttr）;

 

        paint=new Paint（）;

 

    }

 

    /**

 

     * 绘制圆角矩形图片

 

     * @author jimeng

 

     */

 

    @Override

 

    protected void onDraw（Canvas canvas） {

 

        Drawable drawable = getDrawable（）;

 

        if （null != drawable） {

 

            Bitmap bitmap = getBitmapFromDrawable（drawable）;

 

            Bitmap b = getRoundBitmapByShader（bitmap,getWidth（），getHeight（）， 20,0）;

 

            final Rect rectSrc = new Rect（0, 0, b.getWidth（）， b.getHeight（））;

 

            final Rect rectDest = new Rect（0,0,getWidth（），getHeight（））;

 

            canvas.drawBitmap（b, rectSrc, rectDest, paint）;

 

        } else {

 

            super.onDraw（canvas）;

 

        }

 

    }

 

    /**

 

     * 把图片转换成Bitmap

 

     * @param drawable

 

     * 资源图片

 

     * @return 位图

 

     */

 

    public static Bitmap getBitmapFromDrawable（Drawable drawable） {

 

        int width = drawable.getIntrinsicWidth（）;

 

        int height = drawable.getIntrinsicHeight（）;

 

        Bitmap bitmap = Bitmap.createBitmap（width, height, drawable

 

                .getOpacity（） != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888

 

                : Bitmap.Config.RGB_565）;

 

        Canvas canvas = new Canvas（bitmap）;

 

        drawable.draw（canvas）;

 

        return bitmap;

 

    }

 

    public static Bitmap getRoundBitmapByShader（Bitmap bitmap, int outWidth, int outHeight, int radius, int boarder） {

 

        if （bitmap == null） {

 

            return null;

 

        }

 

        int width = bitmap.getWidth（）;

 

        int height = bitmap.getHeight（）;

 

        float widthScale = outWidth * 1f / width;

 

        float heightScale = outHeight * 1f / height;

 

        Matrix matrix = new Matrix（）;

 

        matrix.setScale（widthScale, heightScale）;

 

        //创建需要输出的bitmap

 

        Bitmap desBitmap = Bitmap.createBitmap（outWidth, outHeight, Bitmap.Config.ARGB_8888）;

 

        Canvas canvas = new Canvas（desBitmap）;

 

        Paint paint = new Paint（Paint.ANTI_ALIAS_FLAG）;

 

        //着色器

 

        BitmapShader bitmapShader = new BitmapShader（bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP）;

 

        //给着色器配置matrix

 

        bitmapShader.setLocalMatrix（matrix）;

 

        paint.setShader（bitmapShader）;

 

        //创建矩形区域并且预留出border

 

        RectF rect = new RectF（boarder, boarder, outWidth - boarder, outHeight - boarder）;

 

        //把传入的bitmap绘制到圆角矩形区域内

 

        canvas.drawRoundRect（rect, radius, radius, paint）;

 

        return desBitmap;

 

    }

 

}

 

效果图如下：

 

时间原因，一些简单的细节没有画上去。

 

2.进行布局摆设

 

将整个布局放在HorizontalScrollView中使其可以左右滑动，以一个item为例。

 

<HorizontalScrollView

 

    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

 

    android:layout_height="match_parent"

 

    android:scrollbars="none"

 

    android:orientation="horizontal"

 

    >

 

 <LinearLayout

 

     android:layout_width="wrap_content"

 

     android:layout_height="match_parent"

 

     android:orientation="horizontal">

 

<!--     美化，并无其他作用-->

 

     <RelativeLayout

 

         android:layout_width="@dimen/jimeng_dp_16"

 

         android:layout_height="@dimen/jimeng_dp_135"/>

 

     <RelativeLayout

 

         android:layout_width="@dimen/jimeng_dp_130"

 

         android:layout_height="@dimen/jimeng_dp_135"

 

         >

 

         <TextView

 

             android:layout_width="wrap_content"

 

             android:layout_height="wrap_content"

 

             android:layout_below="@id/like_icon2"

 

             android:layout_centerHorizontal="true"

 

             android:text="计蒙不吃鱼"

 

             android:maxLines="1"

 

             android:ellipsize="end"

 

             android:textColor="@color/jimeng_black"

 

             android:textSize="12.0dip" />

 

         <com.shenzhen.jimeng.jmhnzsb.View.MellowImageView

 

             android:id="@+id/like_icon2"

 

             android:layout_width="120.0dip"

 

             android:layout_height="120.0dip"

 

             android:layout_centerHorizontal="true"

 

             android:scaleType="centerCrop"

 

             android:src="@drawable/yf1" />

 

     </RelativeLayout>

 

 </LinearLayout>

 

</HorizontalScrollView >

 

3.图片切换动画效果

 

博主使用的是ViewFlipper。

 

XML代码如下

 

<RelativeLayout

 

    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"

 

    android:layout_height="wrap_content">

 

    <ViewFlipper

 

        android:id="@+id/viewFlipper"

 

        android:layout_width="120.0dip"

 

        android:layout_height="120.0dip"

 

        android:flipInterval="3000"

 

        android:inAnimation="@anim/anim_marquee_in"

 

        android:outAnimation="@anim/anim_marquee_out" />

 

</RelativeLayout>

 

划重点：两个动画文件，计蒙调试的将近30分钟才调试成类似效果