自定義FloatLayout實(shí)現(xiàn)帶動(dòng)畫(huà)的懸浮視圖

前言

最近在項(xiàng)目開(kāi)發(fā)中有賬號(hào)關(guān)聯(lián)和切換賬號(hào)的需求匈子,并且還要有相應(yīng)的顯示和隱藏動(dòng)畫(huà)匾南,這時(shí)就用到了布局動(dòng)畫(huà) LayoutTransition柴淘,LayoutTransition動(dòng)畫(huà)是基于ViewGroup的貌矿,當(dāng)你調(diào)用View的setVisibility()方法來(lái)控制其View的顯示或消失時(shí)就可以觸發(fā)該動(dòng)畫(huà)叽粹,該動(dòng)畫(huà)有四中類型:
1.APPEARING — 元素在容器中顯現(xiàn)時(shí)需要?jiǎng)赢?huà)顯示
2.CHANGE_APPEARING — 由于容器中要顯現(xiàn)一個(gè)新的元素,其它元素的變化需要?jiǎng)赢?huà)顯示
3.DISAPPEARING —元素在容器中消失時(shí)需要?jiǎng)赢?huà)顯示
4.CHANGE_DISAPPEARING — 由于容器中某個(gè)元素要消失却舀,其它元素的變化需要?jiǎng)赢?huà)顯示

明白了LayoutTransition的基本使用虫几,我們就可以通過(guò)自定義一個(gè)ViewGroup來(lái)實(shí)現(xiàn)該功能
效果圖如下:

初始化狀態(tài)
點(diǎn)擊后展開(kāi)狀態(tài)

實(shí)現(xiàn)

FloatLayout全部代碼:

/**
 * Created by Mersens on 2016/10/21.
 */

public class FloatLayout extends LinearLayout {
    private LayoutParams params = null;
    private Context context;
    private List<View> list = null;
    private static final int ANIMATION_TIME = 20;
    private boolean isMenuOpened;
    private int i = 0;
    private int j = 0;
    private ShowRunnable showRunnable = new ShowRunnable();
    private HideRunnable hideRunnable = new HideRunnable();
    private LayoutTransition layoutTransition;
    private LayoutInflater inflater;
    private OnItemClickListener onItemClickListener;

    public FloatLayout(Context context) {
        this(context, null);
    }

    public FloatLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FloatLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        init();
    }

    final Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
        }
    };

    private void init() {
        layoutTransition = new LayoutTransition();
        setLayoutTransition(layoutTransition);
        list = new ArrayList<>();
        inflater = LayoutInflater.from(context);
        params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params.gravity = Gravity.CENTER;
        params.rightMargin = 10;
        setGravity(Gravity.RIGHT);
        setBackgroundColor(getResources().getColor(android.R.color.transparent));
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(null, View.TRANSLATION_X, 0F, 0F).
                setDuration(layoutTransition.getDuration(LayoutTransition.APPEARING));
        layoutTransition.setAnimator(LayoutTransition.APPEARING, animator1);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(null, View.TRANSLATION_X, 0F, 0F).
                setDuration(layoutTransition.getDuration(LayoutTransition.DISAPPEARING));
        layoutTransition.setAnimator(LayoutTransition.DISAPPEARING, animator2);
    }

    public void addMainItem(final ItemBean item) {
        View mainView = inflater.inflate(R.layout.list_item, null);
        ImageView imageView = (ImageView) mainView.findViewById(R.id.ItemImage);
        TextView tv_name = (TextView) mainView.findViewById(R.id.tvname);
        Glide.with(context).load(item.getImg()).into(imageView);
        tv_name.setText(item.getName());
        mainView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if (isMenuOpened) {
                    hidePromotedActions();
                    isMenuOpened = false;
                } else {
                    isMenuOpened = true;
                    showPromotedActions();
                }
            }
        });
        addView(mainView, params);
    }

    public void addItem(List<ItemBean> items, OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
        for (int i = 0; i < items.size(); i++) {
            View item = inflater.inflate(R.layout.list_item, null);
            ImageView imageView = (ImageView) item.findViewById(R.id.ItemImage);
            Glide.with(context).load(items.get(i).getImg()).into(imageView);
            TextView tv_name = (TextView) item.findViewById(R.id.tvname);
            tv_name.setText(items.get(i).getName());
            item.setOnClickListener(new MyOnClicKListener(i));
            item.setVisibility(View.GONE);
            list.add(item);
            addView(item, params);
        }
    }

    private void hidePromotedActions() {
        invalidate();
        handler.postDelayed(hideRunnable, ANIMATION_TIME);
    }

    private void showPromotedActions() {
        invalidate();
        handler.postDelayed(showRunnable, ANIMATION_TIME);
    }


    class HideRunnable implements Runnable {
        @Override
        public void run() {
            j++;
            if (j <= list.size()) {
                list.get(j - 1).setVisibility(View.GONE);
                handler.postDelayed(hideRunnable, ANIMATION_TIME);
            } else {
                handler.removeCallbacks(hideRunnable);
                j = 0;
            }
        }
    }

    class ShowRunnable implements Runnable {
        @Override
        public void run() {
            i++;
            if (i <= list.size()) {
                list.get(i - 1).setVisibility(View.VISIBLE);
                handler.postDelayed(showRunnable, ANIMATION_TIME);
            } else {
                handler.removeCallbacks(showRunnable);
                i = 0;
            }
        }
    }

    public class MyOnClicKListener implements OnClickListener {
        private int pos;

        public MyOnClicKListener(int pos) {
            this.pos = pos;
        }

        @Override
        public void onClick(View view) {
            onItemClickListener.onItemClick(pos);

        }
    }

    public interface OnItemClickListener {
         void onItemClick(int pos);
    }


}


list_item.xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/itemlayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <com.mersens.floatlayout.floatlayout.CircleImageView
        android:id="@+id/ItemImage"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@mipmap/ic_launcher"
        android:layout_gravity="center_horizontal"
         >
    </com.mersens.floatlayout.floatlayout.CircleImageView>

    <TextView
        android:id="@+id/tvname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Title"
        android:textSize="12sp"
        >
    </TextView>

</LinearLayout>

這里使用了一個(gè)CircleImageView,該View是使用別人的控件挽拔,通過(guò)自定義ImageView來(lái)實(shí)現(xiàn)圓形的圖片辆脸,網(wǎng)上搜索一下會(huì)有很多這樣的例子,但你也不必這么做螃诅,如果你使用了Glide來(lái)加載圖片的話啡氢,Glide本身就可以實(shí)現(xiàn)對(duì)圖片的裁剪,達(dá)到圓形展示的效果术裸,不過(guò)這里還是打算貼出CircleImageView的代碼:

public class CircleImageView extends ImageView {

    private static final ScaleType SCALE_TYPE = ScaleType.CENTER_INSIDE;

    private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
    private static final int COLORDRAWABLE_DIMENSION = 1;

    private static final int DEFAULT_BORDER_WIDTH = 4;
    private static final int DEFAULT_BORDER_COLOR = Color.WHITE;

    private final RectF mDrawableRect = new RectF();
    private final RectF mBorderRect = new RectF();

    private final Matrix mShaderMatrix = new Matrix();
    private final Paint mBitmapPaint = new Paint();
    private final Paint mBorderPaint = new Paint();

    private int mBorderColor = DEFAULT_BORDER_COLOR;
    private int mBorderWidth = DEFAULT_BORDER_WIDTH;

    private Bitmap mBitmap;
    private BitmapShader mBitmapShader;
    private int mBitmapWidth;
    private int mBitmapHeight;

    private float mDrawableRadius;
    private float mBorderRadius;

    private boolean mReady;
    private boolean mSetupPending;

    public CircleImageView(Context context) {
        super(context);
    }

    public CircleImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        super.setScaleType(SCALE_TYPE);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle, 0);

        mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_border_width, DEFAULT_BORDER_WIDTH);
        mBorderColor = a.getColor(R.styleable.CircleImageView_border_color, DEFAULT_BORDER_COLOR);

        a.recycle();

        mReady = true;

        if (mSetupPending) {
            setup();
            mSetupPending = false;
        }
    }

    @Override
    public ScaleType getScaleType() {
        return SCALE_TYPE;
    }

    @Override
    public void setScaleType(ScaleType scaleType) {
        if (scaleType != SCALE_TYPE) {
            throw new IllegalArgumentException(String.format("ScaleType %s not supported.", scaleType));
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (getDrawable() == null) {
            return;
        }

        canvas.drawCircle(getWidth() / 2, getHeight() / 2, mDrawableRadius, mBitmapPaint);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, mBorderRadius, mBorderPaint);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        setup();
    }

    public int getBorderColor() {
        return mBorderColor;
    }

    public void setBorderColor(int borderColor) {
        if (borderColor == mBorderColor) {
            return;
        }

        mBorderColor = borderColor;
        mBorderPaint.setColor(mBorderColor);
        invalidate();
    }

    public int getBorderWidth() {
        return mBorderWidth;
    }

    public void setBorderWidth(int borderWidth) {
        if (borderWidth == mBorderWidth) {
            return;
        }

        mBorderWidth = borderWidth;
        setup();
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        super.setImageBitmap(bm);
        mBitmap = bm;
        setup();
    }

    @Override
    public void setImageDrawable(Drawable drawable) {
        super.setImageDrawable(drawable);
        mBitmap = getBitmapFromDrawable(drawable);
        setup();
    }

    @Override
    public void setImageResource(int resId) {
        super.setImageResource(resId);
        mBitmap = getBitmapFromDrawable(getDrawable());
        setup();
    }

    private Bitmap getBitmapFromDrawable(Drawable drawable) {
        if (drawable == null) {
            return null;
        }

        if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable) drawable).getBitmap();
        }

        try {
            Bitmap bitmap;

            if (drawable instanceof ColorDrawable) {
                bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
            } else {
                bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_CONFIG);
            }

            Canvas canvas = new Canvas(bitmap);
            drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
            drawable.draw(canvas);
            return bitmap;
        } catch (OutOfMemoryError e) {
            return null;
        }
    }

    private void setup() {
        if (!mReady) {
            mSetupPending = true;
            return;
        }

        if (mBitmap == null) {
            return;
        }

        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        mBitmapPaint.setAntiAlias(true);
        mBitmapPaint.setShader(mBitmapShader);

        mBorderPaint.setStyle(Paint.Style.STROKE);
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setColor(mBorderColor);
        mBorderPaint.setStrokeWidth(mBorderWidth);

        mBitmapHeight = mBitmap.getHeight();
        mBitmapWidth = mBitmap.getWidth();

        mBorderRect.set(0, 0, getWidth(), getHeight());
        mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2, (mBorderRect.width() - mBorderWidth) / 2);

        mDrawableRect.set(mBorderWidth, mBorderWidth, mBorderRect.width() - mBorderWidth, mBorderRect.height() - mBorderWidth);
        mDrawableRadius = Math.min(mDrawableRect.height() / 2, mDrawableRect.width() / 2);

        updateShaderMatrix();
        invalidate();
    }

    private void updateShaderMatrix() {
        float scale;
        float dx = 0;
        float dy = 0;

        mShaderMatrix.set(null);

        if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width() * mBitmapHeight) {
            scale = mDrawableRect.height() / (float) mBitmapHeight;
            dx = (mDrawableRect.width() - mBitmapWidth * scale) * 0.5f;
        } else {
            scale = mDrawableRect.width() / (float) mBitmapWidth;
            dy = (mDrawableRect.height() - mBitmapHeight * scale) * 0.5f;
        }

        mShaderMatrix.setScale(scale, scale);
        mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBorderWidth, (int) (dy + 0.5f) + mBorderWidth);

        mBitmapShader.setLocalMatrix(mShaderMatrix);
    }

}

自定義屬性attrs.xml文件

<resources>

    <declare-styleable name="CircleImageView">
        <attr name="border_width" format="dimension" />
        <attr name="border_color" format="color" />
    </declare-styleable>

</resources>

ItemBean實(shí)體類

/**
 * Created by Mersens on 2016/10/22.
 */

public class ItemBean {
    private String name;
    private String img;
    public ItemBean(){

    }
    public ItemBean(String name, String img) {
        this.name = name;
        this.img = img;
    }

    public String getImg() {
        return img;
    }

    public void setImg(String img) {
        this.img = img;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

添加Glide的依賴

compile 'com.github.bumptech.glide:glide:3.7.0'

具體使用方法

public class MainActivity extends AppCompatActivity {
    private FloatLayout floatLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }
    public void init(){
        floatLayout=(FloatLayout)findViewById(R.id.mFloatLayout);
        ItemBean mainItem=new ItemBean("小明","http://staging.topmd.cn/UploadFile/image/20160914103216400.jpg");
        floatLayout.addMainItem(mainItem);
        List<ItemBean> list=new ArrayList<>();
        list.add(new ItemBean("小王","http://staging.topmd.cn/UploadFile/image/20160923162109048.jpg"));
        list.add(new ItemBean("小強(qiáng)","http://staging.topmd.cn/UploadFile/image/20161012160235822.jpg"));
        floatLayout.addItem(list, new FloatLayout.OnItemClickListener() {
            @Override
            public void onItemClick(int pos) {
                Toast.makeText(getApplicationContext(), "item"+pos, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末倘是,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子袭艺,更是在濱河造成了極大的恐慌搀崭,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,561評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猾编,死亡現(xiàn)場(chǎng)離奇詭異瘤睹,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)答倡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門轰传,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人瘪撇,你說(shuō)我怎么就攤上這事获茬。” “怎么了设江?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,162評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵锦茁,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我叉存,道長(zhǎng)码俩,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,470評(píng)論 1 283
  • 正文 為了忘掉前任歼捏,我火速辦了婚禮稿存,結(jié)果婚禮上笨篷,老公的妹妹穿的比我還像新娘。我一直安慰自己瓣履,他們只是感情好率翅,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著袖迎,像睡著了一般冕臭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上燕锥,一...
    開(kāi)封第一講書(shū)人閱讀 49,806評(píng)論 1 290
  • 那天辜贵,我揣著相機(jī)與錄音,去河邊找鬼归形。 笑死托慨,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的暇榴。 我是一名探鬼主播厚棵,決...
    沈念sama閱讀 38,951評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蔼紧!你這毒婦竟也來(lái)了婆硬?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,712評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤歉井,失蹤者是張志新(化名)和其女友劉穎柿祈,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體哩至,經(jīng)...
    沈念sama閱讀 44,166評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡躏嚎,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了菩貌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卢佣。...
    茶點(diǎn)故事閱讀 38,643評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖箭阶,靈堂內(nèi)的尸體忽然破棺而出虚茶,到底是詐尸還是另有隱情,我是刑警寧澤仇参,帶...
    沈念sama閱讀 34,306評(píng)論 4 330
  • 正文 年R本政府宣布嘹叫,位于F島的核電站,受9級(jí)特大地震影響诈乒,放射性物質(zhì)發(fā)生泄漏罩扇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望喂饥。 院中可真熱鬧消约,春花似錦、人聲如沸员帮。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,745評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)捞高。三九已至氯材,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間硝岗,已是汗流浹背浓体。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,983評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留辈讶,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,351評(píng)論 2 360
  • 正文 我出身青樓娄猫,卻偏偏與公主長(zhǎng)得像贱除,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子媳溺,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容