安卓开发—Grally画廊的卡片式效果(ViewPager实现)

一、布局实现

activity_main.xml:

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

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_card"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="50dp"
        android:clipChildren="false"

        ></androidx.viewpager.widget.ViewPager>

</RelativeLayout>

单项布局实现 item_task_viewcard.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:id="@+id/ll_card_layout"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_marginLeft="20dp"
              android:layout_marginRight="20dp"
              android:orientation="vertical"
    >
    <!--cardCornerRadius边缘的弧度,
    cardElevation高度,cardMaxElevation最大高度,cardUseCompatPadding设置内边距-->
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="5dp"
        app:cardElevation="10dp"
        app:cardMaxElevation="12dp"
        app:cardUseCompatPadding="true"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >

            <TextView
                android:gravity="center"
                android:id="@+id/tv_task_card_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginTop="10dp"
                android:text="我是任务1"
                android:textSize="16sp"
                />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="#00ff5f"
                />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

二、代码实现

卡片适配器 ViewPagerCardAdapter
public class ViewPagerCardAdapter extends PagerAdapter {
    private MainActivity mainActivity;


    @Override
    public int getCount() {
        return 8;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = LayoutInflater.from(container.getContext()).inflate(R.layout.item_task_viewcard, null);

        TextView cardNumber = view.findViewById(R.id.tv_task_card_number);
        cardNumber.setText("任务" + (position + 1));

        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);

    }
}

卡片滑动动画 CardTransformer:

public class CardTransformer implements ViewPager.PageTransformer {
    private static final float MAX_SCALE = 1.2f;
    private static final float MIN_SCALE = 1.0f;//0.85f

    @Override
    public void transformPage(View page, float position) {
        if (position <= 1) {
         //   1.2f + (1-1)*(1.2-1.0)
            float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);

            page.setScaleX(scaleFactor);  //缩放效果

            if (position > 0) {
                page.setTranslationX(-scaleFactor * 2);
            } else if (position < 0) {
                page.setTranslationX(scaleFactor * 2);
            }
            page.setScaleY(scaleFactor);
        } else {

            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
        }
    }
}

实现代码 MainActivity:

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewCard;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mViewCard = (ViewPager) findViewById(R.id.vp_card);
        mViewCard.setAdapter(new ViewPagerCardAdapter());
        mViewCard.setOffscreenPageLimit(2);//预加载2个
        mViewCard.setPageMargin(50);//设置viewpage之间的间距
        mViewCard.setClipChildren(false);
        mViewCard.setPageTransformer(true, new CardTransformer());
    }
}

三、运行效果

参考:https://blog.csdn.net/llengnuo/article/details/78363948

参考代码:https://github.com/llengnuo/ViewPageCard

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇