像在Gmail应用中切换帐户的动画

时间:2016-07-07 06:23:58

标签: android material-design viewanimator viewpropertyanimator

Gmail App Navigation View

  

将点击的图片翻译为有效帐户图片,并将活动帐户图片从其位置淡入淡出到点击图片的位置。

3 个答案:

答案 0 :(得分:4)

我喜欢this library的功能,每当有人谈论物化导航抽屉时,它都是非常有用的。你绝对可以在这里实现屏幕截图。

enter image description here

enter image description here

它是一个高度可定制的,我们几乎在4个项目中使用它,我对它非常满意。阅读此here。我不太确定动画,但你可以实现这一点,因为它是非常可定制的库

答案 1 :(得分:4)

将动画效果与布局结合使用并随意制作。我建议你按照对我有用的教程,我将它用于动画。

动画导航示例

https://github.com/mxn21/FlowingDrawer

动画效果按钮效果

其他有用的

https://github.com/XXApple/AndroidLibs/blob/master/%E5%B8%83%E5%B1%80Layout/README.md

Ravi Bro的旧的但常青的例子。

http://www.androidhive.info/2013/06/android-working-with-xml-animations/

答案 2 :(得分:4)

我找到了这个链接。 :https://github.com/HeinrichReimer/material-drawer

在此链接NavigationDrawer演示中,您需要使用Switch Account技术来更改帐户。

为此,您可以点击Small round corner点击(+2),然后点击屏幕截图DropDown,右侧打开repositories { // ... maven { url 'https://jitpack.io' } } dependencies { compile 'com.heinrichreimersoftware:material-drawer:2.3.2' } ,然后选择您的帐户必须去。

依赖性:

Gradle依赖:

public class MainActivity extends DrawerActivity {}

使用方法:

第1步:让您的活动扩展DrawerActivity:

setContentView(R.layout.activity_main);

第2步:设置内容:

drawer.setProfile(
        new DrawerProfile()
                .setRoundedAvatar((BitmapDrawable)getResources().getDrawable(R.drawable.profile_avatar))
                .setBackground(getResources().getDrawable(R.drawable.profile_cover))
                .setName(getString(R.string.profile_name))
                .setDescription(getString(R.string.profile_description))
                .setOnProfileClickListener(new DrawerProfile.OnProfileClickListener() {
                    @Override
                    public void onClick(DrawerProfile drawerProfile, long id) {
                        Toast.makeText(MainActivity.this, "Clicked profile #" + id, Toast.LENGTH_SHORT).show();
                    }
                })
        );

第3步:设置个人资料:

drawer.addItem(
        new DrawerItem()
                .setImage(getResources().getDrawable(R.drawable.ic_first_item))
                .setTextPrimary(getString(R.string.title_first_item))
                .setTextSecondary(getString(R.string.description_first_item))
                .setOnItemClickListener(new DrawerItem.OnItemClickListener() {
                    @Override
                    public void onClick(DrawerItem drawerItem, long id, int position) {
                        Toast.makeText(MainActivity.this, "Clicked first item #" + id, Toast.LENGTH_SHORT).show();
                    }
                })
        );
drawer.addDivider();
drawer.addItem(
        new DrawerItem()
                .setImage(getResources().getDrawable(R.drawable.ic_second_item))
                .setTextPrimary(getString(R.string.title_second_item))
                .setOnItemClickListener(new DrawerItem.OnItemClickListener() {
                    @Override
                    public void onClick(DrawerItem drawerItem, long id, int position) {
                        Toast.makeText(MainActivity.this, "Clicked second item #" + id, Toast.LENGTH_SHORT).show();
                    }
                })
        );

第4步:填充抽屉列表:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/color_primary</item>
    <item name="colorPrimaryDark">@color/color_primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
    <item name="actionBarStyle">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

第5步:将actionBarStyle添加到您的主题:

setDrawerTheme(
        new DrawerTheme(this)
                .setBackgroundColorRes(R.color.background)
                .setTextColorPrimaryRes(R.color.primary_text)
                .setTextColorSecondaryRes(R.color.secondary_text)
                .setTextColorPrimaryInverseRes(R.color.primary_text_inverse)
                .setTextColorSecondaryInverseRes(R.color.secondary_text_inverse)
                .setHighlightColorRes(R.color.highlight)
);

步骤6(可选):更改抽屉主题:

抽屉根据您选择的应用主题获取主题,但您也可以修改它。

setSupportActionBar(toolbar);

第7步(可选):设置您自己的工具栏:

您可以像使用ActionBarActivity一样设置自己的工具栏。

"SharedAccessSignature=Share[snipped]%3d&se=1468067737"

输出:

enter image description here

enter image description here

希望这能帮助你快乐编码...