Andriod仿造微信主界面

Andriod仿造微信主界面

1 工程概况

1.1 工程相关

  • android sdk tools:26.1.1
  • Build tools Version:28.0.3
  • gradle :2.3.3

1.2 工程概述

本工程由一个活动,动态添加四个碎片实现。需要准备四组图标,表示没有被点击和正常点击或者滑动变色。本文所需的图标都是从阿里巴巴矢量图标库下载。变色的图标经过ps的魔棒工具简单处理,再次调色即可。

2 活动动态添加四个碎片

2.1 布局文件

<FrameLayout    
android:id="@+id/address_layout"    
android:layout_width=“0dp”    
android:layout_height=“0dp”  
 android:layout_weight=“0”>

FrameLayout是android中最简单的一种布局,这里用来加入随便很合适。本工程放在bottom.xml里面。

2.2主活动继承Fragment的OnFragmentInteractionListener

  • 本文是一个活动加载多个Fragment,所以活动需要继承多个OnFragmentInteractionListener。继承之后需要重写onFragmentInteraction方法。

@Override
public void onFragmentInteraction(Uri uri) {}

  • 编写动态切换Fragment函数

本工程是replaceAddressFragment方法。
private void replaceAddressFragment(Fragment fragment){
      FragmentManager fragmentManager = getSupportFragmentManager();    
FragmentTransaction transaction = fragmentManager.beginTransaction();                            transaction.replace(R.id.address_layout,fragment);    
      transaction.commit();
}

2.3Fragment重写方法

  • Fragment类里面重写onActivityCreated方法。里面可以加自己的逻辑,本工程是注册了一个点击事件。也可以在里面新建逻辑线程,这样不会阻塞UI线程。

3 滑动翻页和点击翻页逻辑

3.1 滑动翻页

  • 滑动翻页是通过ViewPager.getCurrentItem()方法获取当前滑动页面,然后再通过ImageButton按键实例setImageResource方法加载我们加过颜色的按键,显示处于当前页面的效果。本工程对应的方法是

onPageSelected。

3.2 点击翻页

  • 点击翻页是通过View.getId()获取当前点击页面,再加载加过颜色的按键,显示点击的效果。本工程是onClick()

4 效果

default.png
仿造微信,加载工程完成后默认是首页。

test.gif
测试效果

log.png
点击Fragment里面的按键,会有对应的日志打印,说明按键已经被调用

5 demo地址

有问题欢迎提issues,欢迎star~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
抱歉,我无法编写代码,但我可以向您提供知乎登录界面的 HTML 和 CSS 代码示例。请参考以下代码: HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>知乎登录</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-box"> <h1>知乎登录</h1> <form> <label for="username">用户名</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="请输入密码"> <label class="checkbox-container"> <input type="checkbox" checked="checked"> <span class="checkmark"></span> 记住我 </label> <button type="submit">登录</button> <div class="other-options"> <a href="">手机验证码登录</a> | <a href="">忘记密码</a> </div> </form> </div> </body> </html> ``` CSS 代码: ``` * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #f2f2f2; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .login-box { background-color: #fff; border-radius: 8px; box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1); margin: 100px auto; max-width: 500px; padding: 30px; } h1 { color: #333; font-size: 28px; margin-bottom: 30px; text-align: center; } form { display: flex; flex-direction: column; } label { color: #666; display: block; font-size: 16px; margin-bottom: 6px; } input[type="text"], input[type="password"] { border: none; border-radius: 4px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); font-size: 16px; margin-bottom: 20px; padding: 10px; } input[type="text"]:focus, input[type="password"]:focus { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); outline: none; } .checkbox-container { display: inline-block; position: relative; padding-left: 30px; margin-bottom: 20px; cursor: pointer; font-size: 16px; user-select: none; } .checkbox-container input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #eee; } .checkbox-container:hover input ~ .checkmark { background-color: #ccc; } .checkbox-container input:checked ~ .checkmark { background-color: #2196F3; } .checkmark:after { content: ""; position: absolute; display: none; } .checkbox-container input:checked ~ .checkmark:after { display: block; } .checkbox-container .checkmark:after { left: 7px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); } button[type="submit"] { background-color: #0084ff; border: none; border-radius: 4px; color: #fff; cursor: pointer; font-size: 16px; margin-top: 20px; padding: 10px; transition: background-color 0.2s ease; } button[type="submit"]:hover { background-color: #0071e6; } .other-options { color: #999; font-size: 14px; margin-top: 20px; text-align: center; } .other-options a { color: #999; text-decoration: none; } .other-options a:hover { color: #666; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值