仿蘑菇街界面应用(1)

看到郭霖大神仿微信主界面的博客，在佩服大神文笔犀利、讲解详尽、代码风骚之余，也想在上班无所事事时，找点有意思的东西玩玩，蘑菇街作为中国最大女性购物社区，其APP的设计水平也毋庸置疑的，最近博客将连续来仿造一个蘑菇街的APP的界面设计。

（1）准备工作

  在阅读郭霖大神的博客时有人问里面使用的美工素材怎么得到的，其实很简单，下载一个APP，把APK格式修改成rar后解压，你会在目录下看到所有的素材。

        随后，看看APP的界面：

第一个是启动界面，第二个是主界面，先来看第一个界面。

（1）启动界面（Splash）。

启动界面也叫Splash界面，是APP启动时的第一画面，主要用于介绍应用、宣传或者加载数据，或者兼而有之。这里之所以要单独拿出来是因为这个应用有个独特的，它的LOGO是透明渐变出现的，也就是淡入效果，我们知道ANDROID主要有四种动画：透明动画、缩放、位移、旋转，分别使用的AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation，这里我们使用AlphaAnimation。

界面布局很简单，如activity_loading.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" android:gravity="center"android:background="@drawable/init_bg"><ImageView android:id="@+id/logo"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/init_logo"/>
</LinearLayout>

新建一个LoadingActivity类：如下代码：

public class LoadingActivity extends Activity{@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//设置全屏this.requestWindowFeature(Window.FEATURE_NO_TITLE);this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);setContentView(R.layout.activity_loading);ImageView view =(ImageView) findViewById(R.id.logo);AlphaAnimation aa = new AlphaAnimation(0.01f,1.0f);//透明度变化aa.setDuration(1500);//设置渐变时间view.startAnimation(aa);//设置渐变的viewaa.setAnimationListener(new AnimationListener(){//动画结束后自动执行@Overridepublic void onAnimationEnd(Animation arg0) {redirectTo();}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic void onAnimationStart(Animation animation) {}});}/*** 跳转到登陆界面*/private void redirectTo(){       Intent intent = new Intent(this, MainActivity.class);startActivity(intent);finish();}}

注意2个地方：a. AlphaAnimation aa = new AlphaAnimation(0.01f,1.0f); 构造方法：AlphaAnimation(float fromAlpha, float toAlpha)，表示从透明度0.01到1.0的渐变，我们知道0.0表示全透明，1.0表示完全不透明.

  b. onAnimationEnd方法，顾名思义，表示：在动画结束后自动执行这个方法，这里当然是跳转到主界面了。运行后其效果如下：


是不是很简单，以后做启动画面都可以采用类似的方法。

总结要点：AlphaAnimation类

（1）主界面。

看看原图，如下：


中间的内容先不管，我们看ActionBar和底部菜单，上面是一个自定义的ActionBar，下面是一个切换菜单，而且下面菜单在改变的时候上面的ActionBar也在变。我们这里采用的设计方法是fragment+activity混合使用，底部菜单使用RadioButton，中间留出一个活动的fragment

先来看ActionBar,观察发现ActionBar分为2类，第一个是图片标题，另外一个是文字标题。

所以自定义的actionBar需要2个xml布局文件，分别命名为：actionbar_index.xml和actionbar_usu.xml

其XML布局分别为：actionbar_index.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="fill_parent"android:id="@+id/index_action_layout"android:background="@drawable/title_bg"><ImageButtonandroid:id="@+id/btn_slideMenu"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="center"android:background="@android:color/transparent"android:clickable="true"android:paddingLeft="8dip"android:src="@drawable/index_logo" /><ImageButton android:id="@+id/btn_main_qrcode"android:layout_width="wrap_content"android:layout_height="match_parent"android:background="@android:color/transparent"android:src="@drawable/icon_qc"android:paddingRight="8dip"android:clickable="true"android:layout_gravity="right|center_vertical"/>  
</FrameLayout>
actionbar_usu.xml 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="fill_parent"android:id="@+id/index_action_layout"android:background="@drawable/title_bg"><TextView android:id="@+id/tv_title"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="center"android:gravity="center"android:textColor="@color/white1"android:textSize="@dimen/actionbar_title"android:background="@android:color/transparent"android:clickable="true"android:paddingLeft="8dip"/></FrameLayout>
这个不多讲，唯一值得注意的是需要使用FrameLayout来布局，其中一些strings 、colors以及dimens是自己定义的最后我会将代码传上去。
新建一个ActionBarTool工具类，主要用来设置每个界面的ActionBar,代码如下： 

public class ActionBarTool {Activity activity;public ActionBarTool(Activity activity){this.activity=activity;}/*** 设置主界面的Index*/public void setIndexActionBar(){ActionBar actionBar=activity.getActionBar();       ActionBar.LayoutParams params=new ActionBar.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT,Gravity.CENTER );View view=LayoutInflater.from(activity).inflate(R.layout.actionbar_index, null);actionBar.setCustomView(view,params);actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);actionBar.setDisplayShowCustomEnabled(true);}/*** 设置其他界面的ActionBar* @param title 标题*/public void setUsuActionBar(String title){ActionBar actionBar=activity.getActionBar();       ActionBar.LayoutParams params=new ActionBar.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT,Gravity.CENTER );View view=LayoutInflater.from(activity).inflate(R.layout.actionbar_usu, null);actionBar.setCustomView(view,params);actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);actionBar.setDisplayShowCustomEnabled(true);TextView tv_title=(TextView)activity.findViewById(R.id.tv_title);tv_title.setText(title);}
}
这是自定义目录的一般做法，但是安卓的设计文档里面是不推荐这么使用的，因为这样会破坏ActionBar的一些灵活性，而且到后期很难管理，这里之所以使用是因为文字居中需要自己定义视图，其实可以直接用背景来代替，这样也能实现文字居中，而且不会破坏actonbar的灵活性。

再来看看底部菜单：main.XML文件如下

<?xml version="1.0" encoding="utf-8"?><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="#fff"android:orientation="vertical" ><FrameLayout android:id="@+id/content"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"android:background="#fff"/><RadioGroup android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/gray"android:layout_marginTop="2dp"android:layout_weight="10"android:gravity="center"android:orientation="horizontal" ><RadioButtonandroid:id="@+id/fragment_index"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:button="@null"android:drawableTop="@drawable/index_indicator"android:gravity="center"android:text="@string/index"android:textColor="@color/white"android:textSize="12sp" /><RadioButtonandroid:id="@+id/fragment_category"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:button="@null"android:drawableTop="@drawable/category_indicator"android:gravity="center"android:text="@string/category"android:textColor="@color/white"android:textSize="12sp" /><RadioButtonandroid:id="@+id/fragment_discovery"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:button="@null"android:drawableTop="@drawable/discovery"android:gravity="center"android:text="@string/discovery"android:textColor="@color/white"android:textSize="12sp" /><RadioButtonandroid:id="@+id/fragment_cart"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:button="@null"android:drawablePadding="3dip"android:drawableTop="@drawable/cart_tab_icon_dark"android:gravity="center"android:text="@string/cart"android:textColor="@color/white"android:textSize="12sp" /><RadioButtonandroid:id="@+id/fragment_my"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:button="@null"android:drawablePadding="3dip"android:drawableTop="@drawable/my_indicator"android:gravity="center"android:text="@string/my"android:textColor="@color/white"android:textSize="12sp" />
</RadioGroup>
</LinearLayout>
RadioGroup +活动的FrameLayout 构成了整个页面的布局。

接下来是mian 页面的切换代码，MainActivity.java

public class MainActivity extends FragmentActivity {RadioButton btn_index, btn_category, btn_discovery, btn_cart, btn_my;private Fragment fragment;FragmentManager fragmentManager;ActionBarTool actionbarTool;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);InitUI();}/*** 初始化UI界面*/private void InitUI() {actionbarTool=new ActionBarTool(this);btn_index = (RadioButton) findViewById(R.id.fragment_index);btn_category = (RadioButton) findViewById(R.id.fragment_category);btn_discovery = (RadioButton) findViewById(R.id.fragment_discovery);btn_cart = (RadioButton) findViewById(R.id.fragment_cart);btn_my = (RadioButton) findViewById(R.id.fragment_my);btn_my.setOnClickListener(new switchFragment());btn_cart.setOnClickListener(new switchFragment());btn_discovery.setOnClickListener(new switchFragment());btn_category.setOnClickListener(new switchFragment());btn_index.setOnClickListener(new switchFragment());fragment = new IndexFragment();actionbarTool.setIndexActionBar();btn_index.setTextColor(getResources().getColor(R.color.red));btn_index.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.index_indicator_s), null, null);fragmentManager =getSupportFragmentManager();if (fragment != null) {fragmentManager.beginTransaction().replace(R.id.content, fragment).commit();} else {Log.e("MainActivity", "Error in creating fragment");}}/*** 切换fragment* @author zw.yan* */class switchFragment implements View.OnClickListener {@Overridepublic void onClick(View arg0) {InitBg();//每一次都初始化按钮样式switch (arg0.getId()) {case R.id.fragment_index:fragment = new IndexFragment();actionbarTool.setIndexActionBar();btn_index.setTextColor(getResources().getColor(R.color.red));btn_index.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.index_indicator_s), null, null);break;case R.id.fragment_category:fragment = new CategoryFragment();actionbarTool.setUsuActionBar("分类");btn_category.setTextColor(getResources().getColor(R.color.red));btn_category.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.category_indicator_s), null, null);break;case R.id.fragment_discovery:fragment = new DiscoveryFragment();actionbarTool.setUsuActionBar("发现");btn_discovery.setTextColor(getResources().getColor(R.color.red));btn_discovery.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.discovery_s), null, null);break;case R.id.fragment_cart:fragment = new CartFragment();actionbarTool.setUsuActionBar("我的购物车");btn_cart.setTextColor(getResources().getColor(R.color.red));btn_cart.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.cart_tab_icon_red), null, null);break;case R.id.fragment_my:fragment = new MyFragment();//actionbarTool.setUsuActionBar("我的");btn_my.setTextColor(getResources().getColor(R.color.red));btn_my.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.my_indicator_s), null, null);break;}if (fragment != null) {fragmentManager.beginTransaction().replace(R.id.content, fragment).commit();} else {Log.e("MainActivity", "Error in creating fragment");}}}/*** 初始化按钮样式* */private void InitBg(){btn_index.setTextColor(getResources().getColor(R.color.white));btn_index.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.index_indicator), null, null);btn_category.setTextColor(getResources().getColor(R.color.white));btn_category.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.category_indicator), null, null);btn_cart.setTextColor(getResources().getColor(R.color.white));btn_cart.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.cart_tab_icon_dark), null, null);btn_discovery.setTextColor(getResources().getColor(R.color.white));btn_discovery.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.discovery), null, null);btn_my.setTextColor(getResources().getColor(R.color.white));btn_my.setCompoundDrawablesWithIntrinsicBounds(null, getResources().getDrawable(R.drawable.my_indicator), null, null);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {return true;}}

其他页面的fragment.类似，布局文件是空布局： 

public class IndexFragment extends Fragment{@Overridepublic void onActivityCreated(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onActivityCreated(savedInstanceState);}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {return inflater.inflate(R.layout.fragment_index, container, false);}}
上面的主要代码是：switchFragment类，是切换fragment的，通过fragmentManager.beginTransaction().replace(R.id.content, fragment).commit();来替换当前的fragment，在替换的时候需要先使用 InitBg()初始化按钮的颜色，在来改变按钮的字体颜色和图标。效果如下：

下班了，今天 就到这儿吧。明天继续。










本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/352225.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

实现蘑菇街首页效果

实现蘑菇街首页效果

打算出一个系列&#xff0c;专治现在市面上各种app的各种滑动不服系列&#xff0c;解决各种滑动冲突问题&#xff0c;现在已经发现了9种样式&#xff0c;打算一个一个一一破解&#xff0c;这是第一篇。 今天给大家带来的是高仿蘑菇街的首页&#xff0c;现在这种页面的格式很流…
阅读更多...
设备指纹系列--基础篇

设备指纹系列--基础篇

基础概念 618还没开始&#xff0c;但是又好像已经结束了…在这种电商大促的大节日前&#xff0c;电商行业客户一般会提前找到合适的设备指纹产品&#xff0c;去防止被“薅秃”。因为&#xff0c;黑灰产拥有专业的设备牧场&#xff0c;通过使用模拟器、刷机改机等手段&#xff…
阅读更多...
仿蘑菇街个人主页

仿蘑菇街个人主页

效果图&#xff1a; 看到效果图&#xff0c;第一想到的大致布局是一个scrollview嵌套一个viewpage&#xff0c;viewpage里面有一两个fragment或者写成一个fragment。但是fragment肯定包含两个布局&#xff0c;一个是含有图片(gridview)的listview&#xff0c;另一个布局是只含有…
阅读更多...
App竞品分析报告：美丽说VS蘑菇街

App竞品分析报告：美丽说VS蘑菇街

1.产品概况 iOS App Store中国区iPhone免费-生活类排名&#xff08;最近3个月&#xff09; 数据来源&#xff1a;ann9.com 蘑菇街排名基本稳定在Top 10至20之间&#xff0c;美丽说在8月下旬后基本游离在Top 30外。 2015年6月活跃用户数比对-iOS端 数据说明&#xff1a;MAU为月…
阅读更多...
社会化购物:Pinterest,Fancy还是美丽说,蘑菇街？

社会化购物:Pinterest,Fancy还是美丽说,蘑菇街？

转自&#xff1a;网站分析在中国 原文地址&#xff1a;http://www.chinawebanalytics.cn/social-shopping-pinterest-or-fancy/ 【每期一句】越强烈的网络效应&#xff0c;越接近成功。 【前言】这篇文章是应 的邀请所做。很高兴能有机会与几年前一样&#xff0c;分析一个细分行…
阅读更多...
仿蘑菇街项目

仿蘑菇街项目

引言 仿蘑菇街的Vue.js项目是我学习vue.js做的第一个项目&#xff0c;今天来重温一下项目实现的功能&#xff0c;记录一下&#xff0c;方便以后查看。首先需要创建项目&#xff0c;本项目采用cli-3脚手架创建项目&#xff0c;采用默认安装模式&#xff0c;没有安装vue-router和…
阅读更多...
高仿蘑菇街欢迎页

高仿蘑菇街欢迎页

####蘑菇街欢迎页 ####高仿效果 这里这里…Demo下载地址 #####前言 本文将介绍如何对蘑菇街欢迎页效果进行分析&#xff0c;拆分&#xff0c;并一步步实现1个高仿版本&#xff0c;最重要的设计思路包括以下2点&#xff1a; 1.ViewPager切换时&#xff0c;通过offset偏移量动…
阅读更多...
美丽说蘑菇街首页效果（UITableView和UIScrollerView联动）

美丽说蘑菇街首页效果（UITableView和UIScrollerView联动）

作为一名菜鸟iOS开发程序员&#xff0c;第一次写文章&#xff0c;有点小激动&#xff01;进入正题&#xff0c;最近项目中有个需求&#xff0c;类似美丽说蘑菇街首页效果&#xff0c;在网上找了一些资料后自己研究了下终于搞定了&#xff01; 先看效果&#xff1a; 接下来详细…
阅读更多...
【Linux】Nginx 优化与防盗链

【Linux】Nginx 优化与防盗链

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 Nginx 优化与防盗链 一、隐藏版本号方法一&#xff1a;修改配置文件方式方法二&#xff1a;修改源码文件&#xff0c;重新编译安装 二、修改用户与组三、缓存时间四、日志切割…
阅读更多...
操作系统的最强入门科普（Unix/Linux篇）

操作系统的最强入门科普（Unix/Linux篇）

今天这篇文章&#xff0c;我们来聊聊操作系统&#xff08;Operating System&#xff09;。 说到操作系统&#xff0c;大家都不会陌生。我们天天都在接触操作系统——用台式机或笔记本电脑&#xff0c;使用的是windows和macOS系统&#xff1b;用手机、平板电脑&#xff0c;则是a…
阅读更多...
PDF文件无法编辑怎么办

PDF文件无法编辑怎么办

PDF文件无法编辑是因为设置了编辑限制&#xff0c;只要在设置密码的地方输入密码把密码取消就可以自由编辑文件了。如果不知道密码或者忘记了密码&#xff0c;只能使用第三方的解密软件把密码解除掉&#xff0c;现在有很多PDF的辅助软件&#xff0c;可以在网上搜到很多&#xf…
阅读更多...
SpringBoot实现服务器PDF文件的下载和预览功能

SpringBoot实现服务器PDF文件的下载和预览功能

&#x1f345;程序员小王的博客&#xff1a;程序员小王的博客 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 如有编辑错误联系作者&#xff0c;如果有比较好的文章欢迎分享给我&#xff0c;我会取其精华去其糟粕 &#x1f345;java自学的学习…
阅读更多...
PDF文件不能编辑，有什么办法能够解决？

PDF文件不能编辑，有什么办法能够解决？

PDF文件打开之后发现不能编辑&#xff0c;很有可能是因为PDF文件设置了限制编辑。一般来说&#xff0c;想要解决问题&#xff0c;我们只需要将PDF编辑限制解除就可以了 但是大家有时候可能是不知道PDF密码的&#xff0c;那么在不知道PDF密码的情况下&#xff0c;如何解决不能编…
阅读更多...
java利用itext编辑pdf

java利用itext编辑pdf

最近项目需要,在调研如何在pdf中增加标识字样,用来区分版本.最后确定用itext来实现 . itext的官网是:http://www.itextpdf.com/ 代码如下: Java代码 /** * authory kingviker * time : 2012-12-12 */ import java.io.FileOutputStream; import java.io.IOExcepti…
阅读更多...
java设置pdf不可编辑_禁止编辑，但允许在Java iText / PDF中进行页面提取

java设置pdf不可编辑_禁止编辑，但允许在Java iText / PDF中进行页面提取

我正在使用iText生成PDF文件 . 我想禁止编辑PDF&#xff0c;但允许读者提取页面 . 这是我设置加密的代码&#xff1a; writer.setEncryption(null, null, 0xffffffff, PdfWriter.STANDARD_ENCRYPTION_128); 第三个参数指定权限 . 我正在使用0xffffffff而不是单独的iText标志ALL…
阅读更多...
HTML5 PDF 编辑,pdf.js的使用与改造

HTML5 PDF 编辑,pdf.js的使用与改造

一、前期准备 1.1 需求描述 1.想让各个浏览器能显示服务器存放的PDF文件(主要是手机的浏览器) 2.想让项目结构如下：lib目录存放pdf.js等依赖文件，src存放要显示的pdf文件 想要的项目结构 3.这样我就可以将这个项目放到我网站的任何目录下，比如放到PDF或者别的文件夹下 PDF目…
阅读更多...
如何免费编辑PDF文档？

如何免费编辑PDF文档？

我们都知道PDF文档不像Word文档一样可以直接编辑修改&#xff0c;想要编辑PDF文档&#xff0c;我们就需要借助专业的PDF编辑器。今天小编就给大家推荐一款可以免费编辑PDF文档的工具“金闪PDF编辑器”。 金闪PDF编辑器是一款功能齐全的强大的PDF工具&#xff0c;目前有移动端安…
阅读更多...
PDF文件编辑并去除水印

PDF文件编辑并去除水印

我相信很多博友肯定被这个问题烦恼过&#xff0c;并且当初我自己也因为这个事情熬的掉了好几根头发&#xff0c;这件事就是PDF文件编辑过后会留下很严重的水印&#xff0c;并且无法除去&#xff0c;想去除就得花钱购买会员&#xff0c;想白嫖都没有办法&#xff0c;接下来我就为…
阅读更多...
怎么编辑PDF文件？分享三种好用的编辑方法

怎么编辑PDF文件？分享三种好用的编辑方法

怎么编辑PDF文件中的内容呢&#xff1f;大家在日常使用PDF文件的过程中肯定遇到过需要编辑文件的需求&#xff0c;因为我们不能保证每个文件中的内容都不会出错&#xff0c;问题是PDF文件不容易改动&#xff0c;我们怎么做才能够编辑PDF文件呢&#xff1f;不用着急&#xff0c;…
阅读更多...
如何编辑PDF文件？编辑PDF的方法有哪些？

如何编辑PDF文件？编辑PDF的方法有哪些？

PDF文件是一种广泛使用的文档格式&#xff0c;通常用于共享和阅读文档&#xff0c;如电子书、报告、合同等。但是&#xff0c;有时候您可能需要编辑PDF文件。编辑PDF文件可能听起来很困难&#xff0c;但是有许多方法可以轻松地编辑PDF文件。本文将探讨几种最常见的编辑PDF文件的…
阅读更多...
最新文章

Copyright @ 2022~2023