【模仿】模仿易信的UI

2023-11-09 13:10
文章标签 ui 模仿 易信

本文主要是介绍【模仿】模仿易信的UI,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 

易信,它的UI还是很简洁,因此本人想模仿一下它,用了一天的时候来研究它的资源文件,终于被我写出来。先看下效果图吧。
(一)首页的标题
main_title.xml
?
<?xml version= "1.0" encoding= "utf-8" ?>
<RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android"
     android:layout_width= "fill_parent"
     android:layout_height= "44dip"
     android:gravity= "center_vertical"
     android:padding= "0.0px" >
     <ImageView
         android:id= "@+id/rlCommenTitleBG"
         android:layout_width= "fill_parent"
         android:layout_height= "fill_parent"
         android:background= "@drawable/comm_title_bg" />
     <TextView
         android:id= "@+id/ivTitleName"
         style= "@style/A1_Font"
         android:layout_width= "wrap_content"
         android:layout_height= "fill_parent"
         android:layout_centerInParent= "true"
         android:ellipsize= "end"
         android:gravity= "center"
         android:paddingLeft= "96.0dip"
         android:paddingRight= "96.0dip"
         android:singleLine= "true"
         android:text= "@string/app_name" />
     <ImageButton
         android:id= "@+id/ivTitleBtnLeft"
         android:layout_width= "wrap_content"
         android:layout_height= "wrap_content"
         android:layout_alignParentLeft= "true"
         android:layout_marginLeft= "5dip"
         android:layout_centerVertical= "true"
         android:background= "@drawable/showleft_selector"
         android:gravity= "center"
         android:includeFontPadding= "false" />
     <ImageButton
         android:id= "@+id/ivTitleBtnRigh"
         android:layout_width= "wrap_content"
         android:layout_height= "wrap_content"
         android:layout_alignParentRight= "true"
         android:layout_centerVertical= "true"
         android:background= "@drawable/showright_selector"
         android:gravity= "center"
         android:layout_marginRight= "5dip"
         android:includeFontPadding= "false" />
</RelativeLayout>

 

(二) 左边的滑动菜单实现
通过SlidingMenu库与Fragment来实现当前最为流行的侧滑模式。其实涉及到的知识点有:

1.SlidingMenu
2.Fragment
准备工作: 马上去下载这个开源库, https://github.com/jfeinstein10/SlidingMenu
下载后的SlidingMenu文件,只需要在eclise导入library项目就行了。
导入后,项目名默认就是library,为了好看,我就把它改成了slidingmenu_library。注意,这项目只是一个库哦。待会你要自己新建一个项目里头引用它。
接下来 就是建立我们自己的demo项目啦。
记得建完一个新项目后,请添加刚刚下载的Slidingmenu库。方法: 右键项目--》Properties--》Android--》点击Add,就可以添加库
开始项目的讲解:
MainActivity: 项目的主类,左边的菜单是在主类初始化的。
Fragment_friend: 朋友圈功能的内容类
Fragment_setting: 设置功能的内容类
Fragment_yixin: 易信功能的内容类
LeftSlidingMenuFragment: 左边菜单
RoundedImageview : 圆角头像自定义类
主类的布局: activity_main.xml,只需要放一个FrameLayout即可以
复制代码
< LinearLayout 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"android:background ="@color/white"android:clickable ="true"android:orientation ="vertical" ><include layout= "@layout/main_title" android:focusable ="true" /><FrameLayoutandroid:id ="@+id/content_frame"android:layout_width ="match_parent"android:layout_height ="match_parent" /></ LinearLayout>
复制代码

 

主类: MainActivity.Java  ,要继承SlidingFragmentActivity
复制代码
public class MainActivity extends SlidingFragmentActivity implementsOnClickListener{protected SlidingMenu mSlidingMenu ;private ImageButton ivTitleBtnLeft ;private Fragment mContent ;@Overridepublic void onCreate(Bundle savedInstanceState) {super .onCreate(savedInstanceState);initSlidingMenu();setContentView(R.layout. activity_main );initView();}private void initView() {ivTitleBtnLeft = (ImageButton)this .findViewById(R.id. ivTitleBtnLeft);ivTitleBtnLeft .setOnClickListener( this);}//初始化左侧菜单private void initSlidingMenu() {mContent = new Fragment_yixin();getSupportFragmentManager().beginTransaction().replace(R.id. content_frame , mContent ).commit();setBehindContentView(R.layout. main_left_layout );//设置左边的菜单布局FragmentTransaction mFragementTransaction = getSupportFragmentManager().beginTransaction();Fragment mFrag = new LeftSlidingMenuFragment();mFragementTransaction.replace(R.id. main_left_fragment , mFrag);mFragementTransaction.commit();mSlidingMenu = getSlidingMenu();mSlidingMenu .setMode(SlidingMenu. LEFT); // 设置是左滑还是右滑,还是左右都可以滑,我这里只做了左滑mSlidingMenu .setBehindOffsetRes(R.dimen. slidingmenu_offset); // 设置菜单宽度mSlidingMenu .setFadeDegree(0.35f);// 设置淡入淡出的比例mSlidingMenu .setTouchModeAbove(SlidingMenu. TOUCHMODE_FULLSCREEN); //设置手势模式mSlidingMenu .setShadowDrawable(R.drawable. shadow); // 设置左菜单阴影图片mSlidingMenu .setFadeEnabled( true); // 设置滑动时菜单的是否淡入淡出mSlidingMenu .setBehindScrollScale(0.333f);// 设置滑动时拖拽效果}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.ivTitleBtnLeft ://点击标题左边按钮弹出左侧菜单mSlidingMenu .showMenu( true);break ;default :break ;}}/***    左侧菜单点击切换首页的内容*/public void switchContent(Fragment fragment) {mContent = fragment;getSupportFragmentManager().beginTransaction().replace(R.id. content_frame , fragment).commit();getSlidingMenu().showContent();}}
复制代码

 

  左侧菜单: LeftSlidingMenuFragment

  

复制代码
public class LeftSlidingMenuFragment extends Fragment implements OnClickListener{private View yixinBtnLayout;  //左侧菜单的易信功能private View circleBtnLayout; //左侧菜单的朋友圈功能private View settingBtnLayout; //左侧菜单的设置功能@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(R.layout.main_left_fragment, container,false);yixinBtnLayout = view.findViewById(R.id.yixinBtnLayout);yixinBtnLayout.setOnClickListener(this);circleBtnLayout = view.findViewById(R.id.circleBtnLayout);circleBtnLayout.setOnClickListener(this);settingBtnLayout = view.findViewById(R.id.settingBtnLayout);settingBtnLayout.setOnClickListener(this);System.out.println();return view;}@Overridepublic void onClick(View v) {Fragment newContent = null;switch (v.getId()) {case R.id.yixinBtnLayout: //易信的点击事件newContent = new Fragment_yixin();yixinBtnLayout.setSelected(true);circleBtnLayout.setSelected(false);settingBtnLayout.setSelected(false);break;case R.id.circleBtnLayout: //朋友圈的点击事件newContent = new Fragment_friend();yixinBtnLayout.setSelected(false);circleBtnLayout.setSelected(true);settingBtnLayout.setSelected(false);break;case R.id.settingBtnLayout: //设置的点击事件newContent = new Fragment_setting();yixinBtnLayout.setSelected(false);circleBtnLayout.setSelected(false);settingBtnLayout.setSelected(true);break;default:break;}if (newContent != null)switchFragment(newContent);}/** 切换到不同的功能内容*/private void switchFragment(Fragment fragment) {if (getActivity() == null)return;    MainActivity ra = (MainActivity) getActivity();ra.switchContent(fragment);}
}
复制代码

 

左侧菜单用到两个布局: main_left_layout.xml 和main_left_fragment.xml
main_left_fragment.xml 是要嵌入到main_left_layout显示具体的UI元素,main_left_layout.xml是一个根布局
main_left_layout.xml 
复制代码
<? xml version ="1.0" encoding= "utf-8" ?>
< FrameLayout xmlns:android ="http://schemas.android.com/apk/res/android"android:id ="@+id/main_left_fragment"android:layout_width ="match_parent"android:layout_height ="match_parent"android:background ="@color/white" ></ FrameLayout>
复制代码

 

 

main_left_fragment.xml
复制代码
<? xml version ="1.0" encoding= "utf-8" ?>
< ScrollView android:background ="@color/tools_box_bg" android:scrollbars ="none" android:layout_width ="fill_parent" android:layout_height ="fill_parent"xmlns:android ="http://schemas.android.com/apk/res/android" ><LinearLayout android:orientation= "vertical" android:id ="@+id/llRoot"android:layout_width ="fill_parent" android:layout_height ="wrap_content" >< com.chaowen.yixin.RoundedImageView android:layout_gravity ="center_horizontal" android:id ="@+id/headImageView" android:layout_width ="wrap_content" android:layout_height ="wrap_content" android:layout_marginTop = "25.0dip" android:src ="@drawable/head_default_yixin" android:adjustViewBounds = "true" android:maxHeight ="80dip" android:maxWidth= "80dip" />< TextView android:textSize ="16.0sp" android:textColor ="#ffccccc6"android:layout_gravity ="center_horizontal" android:id ="@+id/nickNameTextView"android:layout_width ="wrap_content" android:layout_height ="wrap_content"android:layout_marginTop = "10.0dip" android:text ="511644784" />< TextView android:textSize ="12.0sp" android:textColor ="#ffa8a8a3"android:layout_gravity ="center_horizontal" android:id ="@+id/yixinCodeTextView"   android:layout_width ="wrap_content" android:layout_height ="wrap_content"android:layout_marginLeft = "10.0dip" android:layout_marginTop = "6.0dip"android:layout_marginRight = "10.0dip" android:layout_marginBottom = "10.0dip" />< include android:id ="@+id/yixinBtnLayout" layout ="@layout/toolbox_item_yixin" />< include android:id ="@+id/circleBtnLayout" layout ="@layout/toolbox_item_friend" />< include android:id ="@+id/settingBtnLayout" layout ="@layout/toolbox_item_setting" />< View android:background ="#ff1c1c1b" android:layout_width ="fill_parent" android:layout_height ="1.3299866dip" />< View android:background ="#ff474745" android:layout_width ="fill_parent" android:layout_height ="1.0px" />< TextView android:textSize ="12.0sp" android:textColor ="#ff999994"android:gravity ="center" android:layout_gravity ="bottom|center" android:id ="@+id/inviteFriendBtnLayout" android:background ="@drawable/tools_box_invite_btn_selector" android:layout_width= "wrap_content"android:layout_height ="wrap_content" android:layout_marginTop = "70.0dip"android:text ="邀请好友" /></LinearLayout >
</ ScrollView>
复制代码

 

com.chaowen.yixin.RoundedImageView 是一个圆形头像的自定义imageView类哦。
后面会继续更新UI。还没做完的,呵呵。
 http://pan.baidu.com/share/link?shareid=3913241068&uk=1863281063

这篇关于【模仿】模仿易信的UI的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/376282

相关文章

CocoStudio中的UI弄到项目中

1、   与alpah版相比,beta版中更改了创建的脚本,可以自定义项目的目录,接下来我们看看。先上图: 2、项目创建     找到 cocos2dx根目录/tools/project-creator/create_project.py文件,双击运行即可。如果未安装python环境,则需要下载安装。脚本运行起来,会显示一个图形界面,用以设置相应的项目

【Qt6.3 基础教程 17】 Qt布局管理详解:创建直观和响应式UI界面

文章目录 前言布局管理的基础为什么需要布局管理器? 盒布局:水平和垂直排列小部件示例:创建水平盒布局 栅格布局:在网格中对齐小部件示例:创建栅格布局 表单布局:为表单创建标签和字段示例:创建表单布局 调整空间和伸缩性示例:增加弹性空间 总结 前言 当您开始使用Qt设计用户界面(UI)时,理解布局管理是至关重要的。布局管理不仅关系到UI的外观,更直接影响用户交互的体验。本篇博

基于uni-app和图鸟UI开发上门服务小程序

一、技术栈选择 uni-app:我们选择了uni-app作为开发框架,因为它基于Vue.js,允许我们编写一次代码,发布到多个平台,包括iOS、Android、Web以及各种小程序。uni-app的丰富组件库、高效的状态管理以及便捷的预览调试功能,极大提升了开发效率。 图鸟UI:图鸟UI是基于uni-app的UI框架,它提供了大量美观且实用的组件和页面模板,帮助我们快速构建出风格统一、用户体

玩转Web之Json(三)-----easy ui怎么把前台显示的dataGird中的所有数据序列化为json,返回到后台并解析

最近做一个项目时,需要在dataGird中插入<input>,即文本输入框,当点击提交时,需要把文本框里填的数据返以及其他列的一些信息以json数组的格式返回到后台,虽然我实现了该功能,但一直没找到简便的方法,今天终于在一位版主的点拨下找到了非常简单的方法。   var all = $("#dg").datagrid("getData");var json =JSON.

玩转Web之easyui(三)-----easy ui dataGird 重新指定url以获取不同数据源信息

如果已经写了一个dataGird并且已经通过url绑定数据源,能不能在其他地方改变url使其从不同数据源获取信息,从而实现查询等操作?答案当然是肯定的,而且仅需要几行代码 $('#btnq').bind('click', function(){ $('#dg').datagrid({ url: '../servlet/Student_search' });//重新指定url$('#dg'

玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)

关于easy ui 异步加载生成树及点击树生成选项卡,这里直接给出代码,重点部分代码中均有注释 前台: $('#tree').tree({ url: '../servlet/School_Tree?id=-1', //向后台传送id,获取根节点lines:true,onBeforeExpand:function(node,param){ $('#tree').tree('options'

玩转Web之easyui(一)-----easy ui datagird 分页

无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程。   easy ui 中数据表格的分页其实是很简单的,分页是在数据表格可以正常显示数据的基础上进行的,在这里给出servlet的代码,其中selectAll()方法是从数据库中提取所有数据, 分页的一种思路是:从数据表中取出所

WebDriver基本操作入门及UI自动化练手页面

在这里集中了我们在做UI自动化时常见的一些控件操作。希望能对新手有帮助。 下载地址:http://files.cnblogs.com/zhangfei/demo.rar package com.test;import java.util.List;import java.util.Set;import org.openqa.selenium.Alert;import org.o

【七】【QT开发应用】跨UI发送信号,跨线程发送信号

跨UI发送信号 基本框架 新建窗口 自定义信号 跨线程发送信号 新建线程 查看线程号 完整代码 跨UI发送信号 setdialog.h #ifndef SETDIALOG_H#define SETDIALOG_H#include <QDialog>namespace U

【漏洞复现】AJ-Report开源数据大屏 verification;swagger-ui RCE漏洞

0x01 产品简介 AJ-Report是一个完全开源的B平台,酷炫大屏展示,能随时随地掌控业务动态,让每个决策都有数据支撑。多数据源支持,内置mysql、elasticsearch、kudu等多种驱动,支持自定义数据集省去数据接口开发,支持17+种大屏组件,不会开发,照着设计稿也可以制作大屏。三步轻松完成大屏设计:配置数据源–>写SQL配置数据集->拖拽配置大屏->保存发布。欢迎体验。 0x0