這兩天研究畫廊效果簿晓,在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