【问题标题】:How to use Android animations to shrink one button while another grows in to view如何使用 Android 动画来缩小一个按钮,而另一个按钮则增长到查看
【发布时间】:2018-01-11 17:24:12
【问题描述】:

我有一个带有两个按钮的布局,一个是可见的,一个是隐藏的。当ViewPager 被滑动时,我需要它,以便视图中的按钮缩小到其大小的一半并向右移动,而之前不在视图中的按钮会增长以填充大按钮占用的空间,例如

从这里: 对此:

然后,当ViewPager 以另一种方式滑动时,Previous 按钮需要缩小为空,而 Next 按钮再次增长以再次填充空间。

到目前为止,我已经尝试了多种方法,从包含LinearLayout 中的简单animateLayoutChanges="true" 到使用ScaleAnimationbtnMain.animate().translationX();,但似乎都没有达到预期的效果。

这是 XML 中按钮的布局:

<LinearLayout
        android:id="@+id/ll_button_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal"
        android:layout_marginBottom="20dp">

        <Button
            android:id="@+id/btn_back"
            android:layout_marginStart="32dp"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="@dimen/creds_button_height"
            android:background="@color/colorPrimary"
            android:letterSpacing="0.0"
            android:visibility="gone"
            android:layout_gravity="end"
            android:layout_marginEnd="-22dp"
            android:text="@string/previous"
            android:textAllCaps="false"
            android:textColor="@color/colorWhite"
            android:textSize="15sp" />

        <Button
            android:id="@+id/btn_main"
            android:layout_marginStart="32dp"
            android:layout_width="0dp"
            android:layout_marginEnd="32dp"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:layout_height="@dimen/creds_button_height"
            android:background="@color/colorPrimaryDark"
            android:letterSpacing="0.0"
            android:text="@string/login_caps"
            android:textAllCaps="false"
            android:textColor="@color/colorWhite" />


    </LinearLayout>

【问题讨论】:

  • 您可以根据分页机的滚动状态控制按钮大小
  • 我会去为视图的权重设置动画。 Here is an example.

标签: android android-layout android-animation


【解决方案1】:

您可以在this 文章中使用PageTransformerOnPageChangeListener 来做到这一点。像这样:

public class MainActivity extends AppCompatActivity {

    public ViewPager mViewPager;
    public Button mFirstButton;
    public Button mSecondButton;

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

        mFirstButton = (Button) findViewById(R.id.first_button);
        mFirstButton.setText("NEXT");
        mSecondButton = (Button) findViewById(R.id.second_button);
        mSecondButton.setText("PREVIOUS");

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPager.setAdapter(new CustomPagerAdapter(this));
        mViewPager.setPageTransformer(false, mButtonsPageTransformer);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    mFirstButton.setText("NEXT");
                } else {
                    mFirstButton.setText("PREVIOUS");
                    mSecondButton.setText("NEXT");
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }


    public enum CustomPagerEnum {

        FIRST_PAGE(R.string.first_page_title, R.layout.first_page),
        SECOND_PAGE(R.string.second_page_title, R.layout.second_page);

        private int mTitleResId;
        private int mLayoutResId;

        CustomPagerEnum(int titleResId, int layoutResId) {
            mTitleResId = titleResId;
            mLayoutResId = layoutResId;
        }

        public int getTitleResId() {
            return mTitleResId;
        }

        public int getLayoutResId() {
            return mLayoutResId;
        }

    }

    private class CustomPagerAdapter extends PagerAdapter {

        private Context mContext;

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

        @Override
        public int getCount() {
            return CustomPagerEnum.values().length;
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            CustomPagerEnum customPagerEnum = CustomPagerEnum.values()[position];
            return mContext.getString(customPagerEnum.getTitleResId());
        }

        @Override
        public Object instantiateItem(ViewGroup collection, int position) {
            CustomPagerEnum customPagerEnum = CustomPagerEnum.values()[position];
            LayoutInflater inflater = LayoutInflater.from(mContext);
            ViewGroup layout = (ViewGroup) inflater.inflate(customPagerEnum.getLayoutResId(), collection, false);
            collection.addView(layout);
            return layout;
        }

        @Override
        public void destroyItem(ViewGroup collection, int position, Object view) {
            collection.removeView((View) view);
        }
    }

    ViewPager.PageTransformer mButtonsPageTransformer = new ViewPager.PageTransformer() {

        public void transformPage(View view, float position) {
            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
            } else if (position <= 1) { // [-1,1]
                LinearLayout.LayoutParams firstButtonLayoutParams = (LinearLayout.LayoutParams) mFirstButton.getLayoutParams();
                firstButtonLayoutParams.weight = 1 - position;
                mFirstButton.setLayoutParams(firstButtonLayoutParams);
            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
            }
        }
    };
}

activity_main.xml点赞

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_above="@+id/buttons_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <LinearLayout
        android:id="@+id/buttons_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/first_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:lines="1"
            />
        <Button
            android:id="@+id/second_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:lines="1"
            />
    </LinearLayout>
</RelativeLayout>

first_page.xmlsecond_page.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:background="@color/red">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/first_page_title"/>

</RelativeLayout>

你会得到类似的东西:

当然,这只是概念,您需要更优雅(带有过渡动画)的解决方案来处理文本更改、按钮样式等。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-03-03
    • 1970-01-01
    • 2017-03-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-08
    相关资源
    最近更新 更多