gpt4 book ai didi

android - Viewpager 选项卡中的动画更改淡入/淡出,就像 Linkedin 介绍屏幕一样

转载 作者:IT老高 更新时间:2023-10-28 22:15:53 26 4
gpt4 key购买 nike

我想为它的介绍(登录/注册)屏幕实现相同类型的动画,例如在 android 应用程序中的链接。

我正在为介绍屏幕使用 View 寻呼机,我想在背景图像更改时实现淡入淡出动画,根据从右向左滑动,反之亦然。我想根据屏幕的滑动实现背景图像变化的淡入淡出动画。任何帮助表示赞赏。请看我的布局代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
android:id="@+id/background_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="7" >

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:gravity="right"
android:orientation="horizontal" >

<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="5dp"
android:src="@drawable/icon_skip" />

<TextView
android:id="@+id/skip_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Skip"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@android:color/white" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="bottom"
android:orientation="vertical" >

<ImageView
android:id="@+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/logo" />

<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context="com.xyz.View.IntroductionScreen" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="center"
android:orientation="vertical" >

<Button
android:id="@+id/connection_bt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:background="@drawable/button"
android:text="CONNEXION"
android:textColor="@android:color/white" />

<Button
android:id="@+id/register_bt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="10dp"
android:background="@drawable/button"
android:text="INSCRIPTION"
android:textColor="@android:color/white" />
</LinearLayout>
</LinearLayout>

而View pager fragment 布局是

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="@+id/text_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="@+id/tagline_tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:text="Laissez votre prochain job"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@android:color/white" />

<TextView
android:id="@+id/details_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="2"
android:text="vous trouver"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="@android:color/white" />

</LinearLayout>
</RelativeLayout>

示例 Splashs creen 这是我想要实现的。 Linkedin Spalsh screen 谢谢

最佳答案

这是一个 lag free 并且还处理 Buttons

enter image description here

主要思想:

1) 首先为您的 fragment 创建透明背景。

2) 创建 LayerDrawable 并将每个 fragment 的背景图像添加为一个项目。然后添加你的 LayerDrawable 作为你的 viewpager 的背景。

3) 在 onCreate 方法中正确设置每一层的 alpha,因此只有上一层的 alpha 值为 255。

4) 为您的 FragmentStatPagerAdapter 的每个 View 设置一个标签,该标签对应于您在 LayerDrawable 中声明的可绘制索引。例如,当您打开应用程序 FragmentA 时,它的标签必须对应于 2 的上部可绘制对象(从 0 开始)。最后一页标签必须为 0 对应于最低可绘制对象。

5) 在transformPage

函数中改变每个 View 的drawable

6) 添加按钮使用RelativeLayout。为了在所有 View 上放置按钮,请使用 RelativeLayout。后来的 child 在 Z 轴上的位置更高。可以在代码中看到:

现在让我们看看代码:

主 Activity

public class MainActivity extends FragmentActivity {

ViewPager viewPager=null;
int numberOfViewPagerChildren = 3;
int lastIndexOfViewPagerChildren = numberOfViewPagerChildren - 1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.pager);
viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));

final LayerDrawable background = (LayerDrawable) viewPager.getBackground();

background.getDrawable(0).setAlpha(0); // this is the lowest drawable
background.getDrawable(1).setAlpha(0);
background.getDrawable(2).setAlpha(255); // this is the upper one

viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(View view, float position) {

int index = (Integer) view.getTag();
Drawable currentDrawableInLayerDrawable;
currentDrawableInLayerDrawable = background.getDrawable(index);

if(position <= -1 || position >= 1) {
currentDrawableInLayerDrawable.setAlpha(0);
} else if( position == 0 ) {
currentDrawableInLayerDrawable.setAlpha(255);
} else {
currentDrawableInLayerDrawable.setAlpha((int)(255 - Math.abs(position*255)));
}

}
});


}
class MyAdapter extends FragmentStatePagerAdapter
{

public MyAdapter(FragmentManager fm) {
super(fm);
}

@Override
public Fragment getItem(int i) {
Fragment fragment=null;
if(i==0)
{
fragment=new FragmentA();
}
if(i==1)
{
fragment=new FragmentB();
}
if(i==2)
{
fragment=new FragmentC();
}
return fragment;
}

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

@Override
public boolean isViewFromObject(View view, Object object) {
if(object instanceof FragmentA){
view.setTag(2);
}
if(object instanceof FragmentB){
view.setTag(1);
}
if(object instanceof FragmentC){
view.setTag(0);
}
return super.isViewFromObject(view, object);
}
}

}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/layerdrawable" >
</android.support.v4.view.ViewPager>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:layout_marginBottom="48dip" >

<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Sign in"
android:layout_margin="16dip"
android:background="#2ec6e4"
android:textColor="#FFFFFF" />

<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Join us"
android:background="#2ec6e4"
android:layout_margin="16dip"
android:textColor="#FFFFFF"
/>
</LinearLayout>

</RelativeLayout>

LayerDrawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
<bitmap
android:id="@+id/Idofbg3"
android:gravity="fill"
android:src="@drawable/bg3" />
</item>
<item>
<bitmap
android:id="@+id/Idofbg2"
android:gravity="fill"
android:src="@drawable/bg2" />
</item>
<item>
<bitmap
android:id="@+id/Idofbg1"
android:gravity="fill"
android:src="@drawable/bg1" />
</item>

</layer-list>

对于不想声明 fragment 的懒人:

fragment A

public class FragmentA extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_a,container,false);

return v;
}
}

fragment_a.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:id="@+id/FragmentA"
android:background="@android:color/transparent">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="This is Fragment A"
android:textColor="#FFFFFF"
android:id="@+id/textView"
android:gravity="center"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>

关于android - Viewpager 选项卡中的动画更改淡入/淡出,就像 Linkedin 介绍屏幕一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25867376/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com