【模仿】模仿易信的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

相关文章

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面,不做任何操作,点击重置按钮,再进行下

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

js私有作用域(function(){})(); 模仿块级作用域

摘自:http://outofmemory.cn/wr/?u=http%3A%2F%2Fwww.phpvar.com%2Farchives%2F3033.html js没有块级作用域,简单的例子: for(var i=0;i<10;i++){alert(i);}alert(i); for循环后的i,在其它语言像c、java中,会在for结束后被销毁,但js在后续的操作中仍然能访

Golang GUI入门——andlabs ui

官方不提供gui标准库,只好寻求第三方库。 https://github.com/google/gxui 这个gui库是谷歌内部人员提供的,并不是谷歌官方出品,现在停止维护,只好作罢。 第三方gui库 找了好多,也比较了好多,最终决定使用的是还是 https://github.com/andlabs/ui 相信golang gui还会发展的更好,期待更优秀的gui库 由于andlabs

在糖尿病患者信息管理系统中,交流区模块想模仿论坛那样几楼几楼的!

在糖尿病患者信息管理系统中,交流区模块想模仿论坛那样几楼几楼的! <s:if test="%{#request.page.pageData!=null}"> <s:iterator value="%{#request.page.pageData}" status="st" var="followCards"> <s:if test="%{#followCards.status==1 &&

移动UI:分类列表页、筛选页的设计揭秘。

移动UI的列表页设计需要考虑用户体验和界面美观性,以下是一些建议的设计要点: 1. 列表项的展示: 列表页应该清晰地展示各个列表项,包括标题、副标题、缩略图等内容,以便用户快速浏览和识别。可以使用卡片式布局或者简洁的列表布局。 2. 搜索和筛选: 如果列表项较多,应该提供搜索和筛选功能,方便用户查找感兴趣的内容。搜索框和筛选条件可以放置在页面顶部或者底部,以便用户方便操作。

UI自动化测试常见面试题

1、什么是UI自动化测试? UI自动化测试是一种通过模拟用户交互并自动执行UI操作的软件测试方法。它用于验证用户界面的功能和稳定性,以确保在不同的操作系统、浏览器和设备上的一致性。 2、UI自动化测试的优势和劣势是什么? 优势: 可以节省时间和成本,提高测试效率。 可以自动执行大量的重复测试任务,减少人为错误。 可以实现广泛的测试覆盖,包括不同的操作系统、浏览器和设备。 可以提供稳定

element-ui打包之后图标不显示,woff、ttf加载404

1、bug 起因 昨天在 vue 项目中编写 element-ui 的树形结构的表格,发现项目中无法生效,定位问题之后发现项目使用的 element-ui 的版本是 2.4.11 。看了官方最新版本是 2.15.14,然后得知 2.4.11 版本是不支持表格树形结构的。于是决定升级 element-ui 的版本,方便后续的开发。 升级之后本地简单的过了一遍系统功能,并没有发现有什么不妥,于