手机QQ 首页登录界面实现

这世界要是没有爱情,它在我们心中还会有什么意义!这就如一盏没有亮光的走马灯。—— 歌德

          最近加班太厉害了,没有时间写博客了。一到国庆又因为遇到了几位值得去结交的大哥又开始happy起来了,这种混日子不是办法呀。。。。。记得前不久,经常和UI的小姑娘吵架,老是说我界面不按照她的要求来做。说实话UI界面是一个App的灵魂,就好比一个人的外表,长得好看就得靠脸吃饭呀,APP看起来美观自然会增加用户对App的好评哟。

        UI小姐姐也设计了和QQ界面差不多的界面,虽然很多地方不同,我还是拿QQ界面说事吧,毕竟QQ才是很有代表性的,用了这么多年的QQ呀。 

布局:

布局需要考虑布局的性能(不能嵌套层数过多,不能重复绘制布局背景),布局是否能适配多种手机(在不同手机上进行等比例的缩放控件的宽与高):

① 首选谷歌官网推荐的约束布局ConstraintLayout

② 绘制边框工具 http://shapes.softartstudio.com/

③ 动画 Move a View with Animation

① 顶部图标控件和文本、②③背景|图标:



圆角背景:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="@dimen/all_bg_radius"
        android:bottomRightRadius="@dimen/all_bg_radius"
        android:topLeftRadius="@dimen/all_bg_radius"
        android:topRightRadius="@dimen/all_bg_radius"></corners>

    <stroke
        android:width="@dimen/all_bg_stroke_width"
        android:color="@color/activity_register_cl_phone_bg"></stroke>
    <solid android:color="@color/activity_register_cl_phone_bg"></solid>
</shape>

       用过QQ的人都知道,首次进入登录页面,输入框会从某个位置垂直向上偏移,达到一定的偏移量就停下来了,我现在迫不及待的想实现这样一个效果,因为这个效果给我的第一印象特别深!!!

导航到谷歌官方文档Move a View with Animation,全局搜索:Move a View with Animation

 Objects on screen will often need to be repositioned. This can occur due to user interaction or some processing done behind the scenes. Instead of immediately updating the objects position, which would cause it to blink from one area to another, you should use an animation to move it from the starting position to its end position.

  视图需要重新确定位置。可能存在用户界面操作或后台进程场景。不是很快就更新视图的位置,从一个区域瞬间到另一个区域,您应该使用动画将它从起始位置移动到结束位置。

上面的意思就是:动画为了带了更好的用户体验,在移动的过程中通过动画重新确定了位置,如果太快一瞬间用户体验很差。

Android provides ways that allow you to reposition your view objects on screen, such as the ObjectAnimator. You can provide the end position you want the object to settle on, as well as the duration of the animation. You can combine this with time interpolators to control the acceleration or decceleration of the animation.

谷歌官方提供了一种确定你视图位置的方式,如objectAnimator。你可以提供视图视图最终停留的位置,以及动画持续的时间。你可以结合时间控制器去控制视图动画的加速或减速。

看过视频后,我们会明白是实现向上移动的动画,最终的位置就是布局时的初始位置:

① 需要获取视图的初始位置view.getY()   Float

② 设置开始滚动的坐标位置view.getY()+任意值  Float

public class TestLoginActivity extends AppCompatActivity {

    ConstraintLayout mClMiddlePhonePwd;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);
        mClMiddlePhonePwd=findViewById(R.id.clMiddlePhonePwd);
        float clMiddlePhowPwdY=mClMiddlePhonePwd.getY();
        //propertyNme: "translationY" 或者 "translationX"
        ObjectAnimator animation = ObjectAnimator.ofFloat(mClMiddlePhonePwd, "translationY", clMiddlePhowPwdY+300,clMiddlePhowPwdY);
        animation.setDuration(3000);
        animation.start();
        //System.out.println("_"+mClMiddlePhonePwd.getX()+"_"+mClMiddlePhonePwd.getPivotX()+"_"+mClMiddlePhonePwd.getRotationX());
    }

}

总结:约束布局可以很好的根据屏幕的来设置控件的百分比以及位置的偏移量,布局更加的方便灵活。

发布了22 篇原创文章 · 获赞 17 · 访问量 6932

猜你喜欢

转载自blog.csdn.net/u013491829/article/details/102324489