畫廊效果

這兩天研究畫廊效果簿晓,在github 上發(fā)現(xiàn)一個還不錯的開源項目,集成了一下材原,下面來看下效果


1514724610614mz22.gif

下面看下集成過程
首先在build.gradle中導入相應的依賴包

compile 'com.github.moondroid.coverflow:library:1.0'

新建一個GameEntity實體類

public class GameEntity {
    public int imageResId;
    public int titleResId;
    public GameEntity (int imageResId, int titleResId){
        this.imageResId = imageResId;
        this.titleResId = titleResId;
    }
}

適配器類

package com.coverflow;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * 作者: chengcheng
 * 時間: 17/12/29- 上午10:10
 * 描述:
 */

public class CoverFlowAdapter extends BaseAdapter {

    private ArrayList<GameEntity> mData = new ArrayList<>(0);
    private Context mContext;

    public CoverFlowAdapter(Context context) {
        mContext = context;
    }

    public void setData(ArrayList<GameEntity> data) {
        mData = data;
    }

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public Object getItem(int pos) {
        return mData.get(pos);
    }

    @Override
    public long getItemId(int pos) {
        return pos;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        View rowView = convertView;

        if (rowView == null) {
            LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            rowView = inflater.inflate(R.layout.item_coverflow, null);

            ViewHolder viewHolder = new ViewHolder();
            viewHolder.text = (TextView) rowView.findViewById(R.id.label);
            viewHolder.image = (ImageView) rowView.findViewById(R.id.image);
            rowView.setTag(viewHolder);
        }

        ViewHolder holder = (ViewHolder) rowView.getTag();

        holder.image.setImageResource(mData.get(position).imageResId);
        holder.text.setText(mData.get(position).titleResId);
        holder.image.setTag(mData.get(position));

        return rowView;
    }


    static class ViewHolder {
        public TextView text;
        public ImageView image;
    }
}

MainActivity類吻育,在這個類里面處理數(shù)據(jù)

package com.coverflow;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.TextSwitcher;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ViewSwitcher;

import java.util.ArrayList;

import it.moondroid.coverflow.components.ui.containers.FeatureCoverFlow;

public class MainActivity extends AppCompatActivity {

    private CoverFlowAdapter mAdapter;
    private ArrayList<GameEntity> mData = new ArrayList<>(0);
    private TextSwitcher mTitle;
    private FeatureCoverFlow mCoverFlow;
    private TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTextView = (TextView) findViewById(R.id.jump);
        mTitle = (TextSwitcher) findViewById(R.id.title);
        mCoverFlow = (FeatureCoverFlow) findViewById(R.id.coverflow);
        initData();
        setOtherClick();
    }

    private void initData() {
        mData.add(new GameEntity(R.drawable.image_1, R.string.title1));
        mData.add(new GameEntity(R.drawable.image_2, R.string.title2));
        mData.add(new GameEntity(R.drawable.image_3, R.string.title3));
        mData.add(new GameEntity(R.drawable.image_4, R.string.title4));
        mData.add(new GameEntity(R.drawable.image_5, R.string.title5));
        mData.add(new GameEntity(R.drawable.image_6, R.string.title6));
        mData.add(new GameEntity(R.drawable.image_7, R.string.title7));
        mData.add(new GameEntity(R.drawable.image_8, R.string.title8));
        mData.add(new GameEntity(R.drawable.image_9, R.string.title9));

        mAdapter = new CoverFlowAdapter(this);
        mAdapter.setData(mData);
        mCoverFlow.setAdapter(mAdapter);
        setCoverFlowOnItemClick();
    }

    private void setCoverFlowOnItemClick() {
        mCoverFlow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                ImageView imageView = view.findViewById(R.id.image);
                if (imageView != null) {
                    GameEntity entity = (GameEntity) imageView.getTag();
                    Toast.makeText(MainActivity.this, entity.titleResId, Toast.LENGTH_SHORT).show();
                }
            }
        });

        mCoverFlow.setOnScrollPositionListener(new FeatureCoverFlow.OnScrollPositionListener() {
            @Override
            public void onScrolledToPosition(int position) {
                mTitle.setText(getResources().getString(mData.get(position).titleResId));
            }

            @Override
            public void onScrolling() {
                mTitle.setText("");
            }
        });
    }

    private void setOtherClick() {
        mTitle.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
                TextView textView = (TextView) inflater.inflate(R.layout.item_title, null);
                return textView;
            }
        });
        mTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, SecondActivity.class);
                startActivity(intent);
            }
        });
    }


}

activity_main.xml 界面布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:coverflow="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.coverflow.MainActivity">

  
    <it.moondroid.coverflow.components.ui.containers.FeatureCoverFlow
        android:id="@+id/coverflow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        coverflow:coverHeight="@dimen/cover_height"
        coverflow:coverWidth="@dimen/cover_width"
        coverflow:maxScaleFactor="1.6"
        coverflow:reflectionGap="0px"
        coverflow:reflectionHeight="0.5"
        coverflow:rotationThreshold="0.5"
        coverflow:scalingThreshold="0.5"
        coverflow:spacing="0.5"
        />

    <TextSwitcher
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerVertical="true"
        android:paddingBottom="26dp"/>

    <TextView
        android:id="@+id/jump"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:padding="12dp"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="15sp"
        android:text="跳轉"/>

</RelativeLayout>

item_coverflow.xml 適配器布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="@dimen/cover_width"
             android:layout_height="@dimen/cover_height"
             android:clickable="true"
             android:foreground="@drawable/cover_selector">


    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:scaleType="centerCrop"
        tools:src="@drawable/image_1"/>

    <TextView
        android:id="@+id/label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/label_background"
        android:gravity="center"
        android:padding="8dp"
        android:textAppearance="?android:attr/textAppearanceSmallInverse"
        android:visibility="gone"
        tools:text="Title"/>
</FrameLayout>

item_title.xml 布局

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:gravity="center"
          android:textColor="@color/red"
          android:textSize="13sp"
          tools:text="title"/>

cover_selector.xml 選中陰影效果

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <color android:color="#96000000" />
    </item>
    <item>
        <color android:color="@android:color/transparent" />
    </item>
</selector>

代碼其實很簡單,文章結尾部分是我在GitHub上面的Demo艇肴,可以下載看下

注意下一些屬性的使用
coverWidth 圖片的寬度
coverHeight 圖片的高度
scalingThreshold 距離中心的距離是小部件大小的一半腔呜,在這里,它開始縮放
1意味著從小部件的邊緣開始縮放再悼,0意味著只有中心縮放默認是0.5
adjustPositionMultiplier 調(diào)整擴大圖片的間距 默認1.0f
maxScaleFactor 選中圖片放大倍速 1.5倍合適
reflectionGap  反射和原始圖像在像素上的差距
rotationThreshold 旋轉角度
spacing 圖片之間的間隔
circlePathRadius 圓徑的半徑。屏幕的范圍是-1到1膝但,最小半徑是1,默認是2f
reflectionHeight 倒影的高度 默認是0.5
reflectionBackroundColor 倒影的背景色 默認是透明
alignAnimationTime 對齊動畫需要多長時間 默認是350毫秒

在github上的地址
https://github.com/shaozucheng/MyCoverFlowDemo
需要的小伙伴最好去下載代碼看下

原本的github 地址:https://github.com/moondroid/CoverFlow

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末冲九,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子跟束,更是在濱河造成了極大的恐慌莺奸,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件冀宴,死亡現(xiàn)場離奇詭異灭贷,居然都是意外死亡,警方通過查閱死者的電腦和手機略贮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門甚疟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人逃延,你說我怎么就攤上這事览妖。” “怎么了揽祥?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵讽膏,是天一觀的道長。 經(jīng)常有香客問我拄丰,道長府树,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任料按,我火速辦了婚禮奄侠,結果婚禮上,老公的妹妹穿的比我還像新娘站绪。我一直安慰自己遭铺,他們只是感情好,可當我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布恢准。 她就那樣靜靜地躺著魂挂,像睡著了一般。 火紅的嫁衣襯著肌膚如雪馁筐。 梳的紋絲不亂的頭發(fā)上涂召,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天,我揣著相機與錄音敏沉,去河邊找鬼果正。 笑死炎码,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的秋泳。 我是一名探鬼主播潦闲,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼迫皱!你這毒婦竟也來了歉闰?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤卓起,失蹤者是張志新(化名)和其女友劉穎和敬,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體戏阅,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡昼弟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了奕筐。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片舱痘。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖救欧,靈堂內(nèi)的尸體忽然破棺而出衰粹,到底是詐尸還是另有隱情,我是刑警寧澤笆怠,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布铝耻,位于F島的核電站,受9級特大地震影響蹬刷,放射性物質發(fā)生泄漏瓢捉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一办成、第九天 我趴在偏房一處隱蔽的房頂上張望泡态。 院中可真熱鬧,春花似錦迂卢、人聲如沸某弦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽靶壮。三九已至,卻和暖如春员萍,著一層夾襖步出監(jiān)牢的瞬間腾降,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工碎绎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留螃壤,地道東北人抗果。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像奸晴,于是被迫代替她去往敵國和親冤馏。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,969評論 2 355

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,154評論 25 707
  • 前言 對于ViewPager寄啼,相信大家都已經(jīng)很熟悉了宿接,在各種切換場景比如Fragment切換、選項卡的切換或者頂部...
    丶藍天白云夢閱讀 7,742評論 4 36
  • 提起日本辕录,很多人成了憤青,高舉批判的大旗梢卸,滿腔熱血從甲午說到抗日走诞,喋喋不休。 子曰:“德不孤蛤高,必有鄰蚣旱。”我們應該銘...
    月月月兒閱讀 479評論 4 2
  • 沒想到那么簡單的一句話戴陡,說出來卻費盡了渾身的力氣塞绿。 再見吧,從2013年到2017年恤批,我們最美好的時光异吻。
    紅麻雀閱讀 532評論 0 0
  • 關于block 這段代碼在MRC和ARC下的輸出結果是不一樣的MARC環(huán)境下的輸出結果 ARC環(huán)境下的輸出結果 而...
    JazzP閱讀 317評論 1 0