画廊效果

这两天研究画廊效果,在github 上发现一个还不错的开源项目,集成了一下,下面来看下效果


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类,在这个类里面处理数据

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 调整扩大图片的间距 默认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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,117评论 25 707
  • 前言 对于ViewPager,相信大家都已经很熟悉了,在各种切换场景比如Fragment切换、选项卡的切换或者顶部...
    丶蓝天白云梦阅读 7,742评论 4 36
  • 提起日本,很多人成了愤青,高举批判的大旗,满腔热血从甲午说到抗日,喋喋不休。 子曰:“德不孤,必有邻。”我们应该铭...
    月月月儿阅读 479评论 4 2
  • 没想到那么简单的一句话,说出来却费尽了浑身的力气。 再见吧,从2013年到2017年,我们最美好的时光。
    红麻雀阅读 530评论 0 0
  • 关于block 这段代码在MRC和ARC下的输出结果是不一样的MARC环境下的输出结果 ARC环境下的输出结果 而...
    JazzP阅读 314评论 1 0