在实际开发中我们可能需要实现卡片效果,一个页面显示一个卡片,左右各半个,这种的ui效果,如图:
这种效果的实现也不难。
如何实现一个页面上,显示一个卡片呢,左右各半个,
我们就要用一个属性了
<com.test.scrolltransptoolbar.CardViewPage
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="330dp"
android:clipToPadding="false"
android:layout_centerInParent="true"
android:overScrollMode="never"
android:paddingBottom="20dp"
android:paddingLeft="60dp"
android:paddingRight="60dp">
</com.test.scrolltransptoolbar.CardViewPage>
CardViewPage 是我继承ViewPage实现的类。
最总要的属性
android:clipToPadding="false"
- clipToPadding就是说控件的绘制区域是否在padding里面的,true的情况下如果你设置了padding那么绘制的区域就往里缩,如果为false ,那么绘制区域会包含 之前设置到padding部分。
进一步分析, 下面padding 设置区域范围有效是正对中间的卡片, 如果设置android:clipToPadding=”false”,那么左右padding 设置区域就会是上一个卡片或者是下一个卡片的绘制区域,不知道你们懂了没。
android:paddingBottom="20dp"
android:paddingLeft="60dp"
android:paddingRight="60dp"
如果你,设置了上面代码,然后加入下面代码
viewPager.setOffscreenPageLimit(3);//预加载3页
很简单的实现上面效果,一个卡片,然后左右部分各显示上个与下个图片的的部分。
ViewPage复杂的使用。
1.卡片效果
2.滑动卡片,增加阴影
3.点击卡片自定切换
5.选种或者滑动到本页面时候,卡片放大
效果:
因为,csdn只能上传2m内图片,所以压缩了,有点快,看不出来点击切换效果。
- 实现卡片效果,CardView
引入:
def SUPPORT = "25.3.1"
dependencies {
..
compile "com.android.support:appcompat-v7:$SUPPORT"
compile "com.android.support:cardview-v7:$SUPPORT"
testCompile 'junit:junit:4.12'
}
常用方法:
app:cardBackgroundColor="#ffffff"
cardView.setCardBackgroundColor(int);//设置CardView的background的颜色
app:cardCornerRadius="5dp"
cardView.setRadius(float);//设置CardView的圆角半径
app:cardElevation="2sp"
cardView.setMaxCardElevation(float)//设置CardView的elevation(阴影,值越大,阴影效果越强)
app:cardMaxElevation="2sp"//设置CardView的最大Elevation
app:cardPreventCornerOverlap="true|false"
cardView.setPreventCornerOverlap(boolean);//在Android5.0以前的版本上防止子控件和CardView的圆角之间的重叠交接
app:cardUseCompatPadding="true|false"
cardView.setUseCompatPaddin(boolean);//在Android5.0和以上版本添加padding让其和之前的版本有相同的测量形式
app:contentPadding=""
cardView.setContentPadding(int,int,int,int);//设置Card边缘和CardView的子控件之间的内边距
app:contentPaddingTop=""
app:contentPaddingBottom=""
app:contentPaddingLeft=""
app:contentPaddingRight=""
ViewPagerCardViewActivity 代码:
package com.test.scrolltransptoolbar;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v7.widget.CardView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Administrator on 2017/9/11.
*/
public class ViewPagerCardViewActivity extends Activity {
private List<CardView> views=new ArrayList<>();
private List<ImgBean> imgBeens;
private MyAdapter adapter;
private CardViewPage viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager_card_view);
findViewById();
}
//初始化控件
private void findViewById() {
viewPager = (CardViewPage) findViewById(R.id.vp);
imgBeens = getList();
adapter = new MyAdapter();
viewPager.setAdapter(adapter);
//预加载3页
viewPager.setOffscreenPageLimit(3);
}
/**
* 初始化数据
* @return
*/
public List<ImgBean> getList() {
List<ImgBean> imgBeen=new ArrayList<>();
views.add(null);
views.add(null);
views.add(null);
views.add(null);
views.add(null);
imgBeen.add(new ImgBean(R.mipmap.img2,"西斯美女"));
imgBeen.add(new ImgBean(R.mipmap.img3,"漂亮美女"));
imgBeen.add(new ImgBean(R.mipmap.img4,"混血美女"));
imgBeen.add(new ImgBean(R.mipmap.img5,"韩国美女"));
imgBeen.add(new ImgBean(R.mipmap.img6,"日本美女"));
return imgBeen;
}
private class MyAdapter extends PagerAdapter implements CardAdapter{
private float mBaseElevation;
@Override
public int getCount() {
return imgBeens.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;//固定写法
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);//固定写法
//当前卡片消失就移除
views.set(position,null);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view= LayoutInflater.from(container.getContext()).inflate(R.layout.item_vp_view,container,false);
container.addView(view);//必须这么写,要不然显示不出来
CardView card_view = (CardView) view.findViewById(R.id.card_view);
ImageView img= (ImageView) view.findViewById(R.id.img);
TextView context= (TextView) view.findViewById(R.id.context);
ImgBean imgBean= imgBeens.get(position);
img.setImageResource(imgBean.getImg());
context.setText(imgBean.getShuoming());
if (mBaseElevation == 0) {
mBaseElevation = card_view.getCardElevation();//获取卡片阴影
Log.i("mBaseElevation","mBaseElevation=="+mBaseElevation);
}
// 设置z轴的最大高度值
card_view.setMaxCardElevation(mBaseElevation*MAX_ELEVATION_FACTOR);
//保留每一个卡片实体类
views.set(position, card_view);
view.setTag(position);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position= (int) v.getTag();
viewPager.setCurrentItem(position);
}
});
return view;
}
@Override
public float getBaseElevation() {
return mBaseElevation;
}
@Override
public CardView getCardViewAt(int position) {
return views.get(position);
}
}
}
activity_view_pager_card_view.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.test.scrolltransptoolbar.CardViewPage
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="330dp"
android:clipToPadding="false"
android:layout_centerInParent="true"
android:overScrollMode="never"
android:paddingBottom="20dp"
android:paddingLeft="60dp"
android:paddingRight="60dp">
</com.test.scrolltransptoolbar.CardViewPage>
</RelativeLayout>
CardViewPage 代码
package com.test.scrolltransptoolbar;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.CardView;
import android.util.AttributeSet;
/**
* Created by Administrator on 2017/9/12.
*/
public class CardViewPage extends ViewPager{
private float mLastOffset;
private CardAdapter cardAdapter;
public CardViewPage(Context context) {
super(context);
}
public CardViewPage(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onPageScrolled(int position, float positionOffset, int offsetPixels) {
super.onPageScrolled(position, positionOffset, offsetPixels);
cardAdapter = (CardAdapter) getAdapter();
if (cardAdapter ==null)
{
return;
}
// If we're going backwards, onPageScrolled receives the last position
// instead of the current one
int realCurrentPosition;
int nextPosition;
float realOffset;
//positionOffset 如果往左边滑动就是逐渐变大 0->1 ,然后归0,如果往右滑动 1-》0 ,最后归0。
//下面这个判断区分左右,
boolean goingLeft = mLastOffset > positionOffset;
if (goingLeft) {
realCurrentPosition = position + 1;
nextPosition = position;
realOffset = 1 - positionOffset;
} else {
nextPosition = position + 1;
realCurrentPosition = position;
realOffset = positionOffset;
}
if (nextPosition > getAdapter().getCount() - 1
|| realCurrentPosition > cardAdapter.getCount() - 1) {
return;
}
CardView currentCard = cardAdapter.getCardViewAt(realCurrentPosition);
if (currentCard!=null)
{
float scclex=(float) (1 + 0.1 * (1 - realOffset));
float sccley=(float)(1 + 0.1 * (1 - realOffset));
currentCard.setScaleX(scclex);
currentCard.setScaleY(sccley);
currentCard.setCardElevation((cardAdapter.getBaseElevation() + cardAdapter.getBaseElevation()
* (CardAdapter.MAX_ELEVATION_FACTOR - 1) * (1 - realOffset)));
}
CardView nextCard = cardAdapter.getCardViewAt(nextPosition);
// We might be scrolling fast enough so that the next (or previous) card
// was already destroyed or a fragment might not have been created yet
if (nextCard != null) {
nextCard.setScaleX((float) (1 + 0.1 * (realOffset)));
nextCard.setScaleY((float) (1 + 0.1 * (realOffset)));
nextCard.setCardElevation((cardAdapter.getBaseElevation() + cardAdapter.getBaseElevation()
* (CardAdapter.MAX_ELEVATION_FACTOR - 1) * (realOffset)));
}
mLastOffset = positionOffset;
}
}
CardAdapter 代码
package com.test.scrolltransptoolbar;
import android.support.v7.widget.CardView;
/**
* Created by Administrator on 2017/9/12.
* 卡片接口类
*/
public interface CardAdapter {
//数值越大间距越大
int MAX_ELEVATION_FACTOR = 8;
float getBaseElevation();
CardView getCardViewAt(int position);
int getCount();
}
item_vp_view.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_view"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/img"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<TextView
android:id="@+id/context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dsfsd"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal" />
</RelativeLayout>
</android.support.v7.widget.CardView >
demo地址:
https://github.com/Followk/scrolltransptoolbar