Android手机UI设计---软件市场界面设计

这是一个简单的Android手机UI设计—“软件市场”界面设计。上方的图片滑动由Gallery完成，最底下的类别分类是由TabHost完成，而在“首页”这个类别内，嵌套了三个SubTab（子Tab）。在其中一个SubTab里放置了自定义的ListView。
PS：这个我是用Android Studio2.3做的。

界面设计由来：这是一个手机的“软件市场”设计界面，下面的代码与截图主要是完成它的界面设计。

我的运行效果截图：有点丑，看看就好。
在这里，我给你们分享一个矢量图标库，很好用。
阿里巴巴矢量图标库：http://iconfont.cn/plus

源码：
MainActivity.java的代码：入口类

package com.example.lenovo.softwaremarket;import android.app.Activity;
import android.app.ActivityGroup;
import android.app.TabActivity;
import android.content.Context;
import android.content.Intent;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Adapter;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TableLayout;
import android.widget.Toast;
import static android.widget.AdapterView.*;public class MainActivity extends TabActivity implements OnItemSelectedListener{
//定义一个Gallery的适配器private GalleryAdapter adapter;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);//获得TabHost TabHost tabs = getTabHost();//新建一个tab并设置它的，Tag,标题，图标，内容tabs.addTab(tabs.newTabSpec("tab1").setIndicator("首页",getResources().getDrawable(android.R.drawable.arrow_down_float)).setContent(new Intent(this, Subtabsss.class)));//使用Intent来对Tab分页tabs.addTab(tabs.newTabSpec("tab2").setIndicator("类别",getResources().getDrawable(android.R.drawable.arrow_down_float)).setContent(new Intent(this, NActivity.class)));tabs.addTab(tabs.newTabSpec("tab3").setIndicator("搜索",getResources().getDrawable(android.R.drawable.arrow_down_float)).setContent(new Intent(this, NActivity.class)));tabs.addTab(tabs.newTabSpec("tab4").setIndicator("管理",getResources().getDrawable(android.R.drawable.arrow_down_float)).setContent(new Intent(this, NActivity.class)));tabs.addTab(tabs.newTabSpec("tab5").setIndicator("更多",getResources().getDrawable(android.R.drawable.arrow_down_float)).setContent(new Intent(this, NActivity.class)));tabs.setCurrentTab(0);//设置初始选中状态为第一个tab//“软件市场”上方的相册使用Gallery，图片浏览控件//定义 Gallery 控件 ，根据ID寻找到相册 Gallery gallery =(Gallery)findViewById(R.id.gallery); //初始化自定义的图片适配器adapter=new GalleryAdapter(this);//绑定适配器gallery.setAdapter(adapter);// 设置图片之间的间距gallery.setSpacing(5);//选择监听事件  gallery.setOnItemSelectedListener(this);}/*** 更新Tab标签的背景图*/private void updateTabBackground(final TabHost tabs) {for (int i = 0; i < tabs.getTabWidget().getChildCount(); i++) {View vvv = tabs.getTabWidget().getChildAt(i);if (tabs.getCurrentTab() == i) {//选中后的背景vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.m2));} else {//非选择的背景vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.m1));}}}@Overridepublic void onItemSelected(AdapterView<?> parent, View view, int position, long id) {adapter.setSelectItem(position);  //当滑动时，事件响应，调用适配器中的这个方法。}public void onNothingSelected(AdapterView<?> parent) {}
}

GalleryAdapter.java的代码：图片浏览

package com.example.lenovo.softwaremarket;import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;/*** Created by lenovo on 2017/3/24.*/
//创建一个 BaseAdapter对象，该对象负责提供 Gallery所显示的每张图片
public class GalleryAdapter extends BaseAdapter {Context c;private int selectItem;//往Integer[]数组加入图片IDint[] imageIDs = new int[] {R.drawable.xx1,R.drawable.xx2,R.drawable.xx3,R.drawable.xx4};public GalleryAdapter(Context c){this.c=c;}//这个属性决定Gallery控件显示多少张图片@Overridepublic int getCount() {return  imageIDs.length;}//默认代码，想取指定位置的对象，要重定义这个方法中的代码@Overridepublic Object getItem(int position) {return position;}//默认代码，想取指定位置的ID对象，要重定义这个方法中的代码@Overridepublic long getItemId(int position) {return position;}public void setSelectItem(int selectItem) {if (this.selectItem != selectItem) {this.selectItem = selectItem;notifyDataSetChanged();}}//返回值VIew代表每一个显示在Gallery控件中的图片@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ImageView imageView = new ImageView(c);//取余，让图片循环浏览imageView.setImageResource(imageIDs[position % imageIDs.length]);if(selectItem==position) {  imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setLayoutParams(new Gallery.LayoutParams(250, 380)); //选中时，这是设置的大一点}else {imageView.setLayoutParams(new Gallery.LayoutParams(100,200));}return imageView;}}

Subtabsss.java的代码：三个子Tab以及自定义ListView

package com.example.lenovo.softwaremarket;import android.app.Activity;
import android.app.ListActivity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** Created by lenovo on 2017/3/26.*/public class Subtabsss extends  Activity {//定义一个Listviewprivate ListView listView;//定义一个RatingBarprivate RatingBar sss;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.subtab);//以下三句代码，注意顺序TabHost mTabHost = (TabHost)findViewById(R.id.mytabhost);//TabHost mTabHost = getTabHost();mTabHost.setup();TabWidget tabWidget = mTabHost.getTabWidget();mTabHost.addTab(mTabHost.newTabSpec("精品推荐").setIndicator("精品推荐").setContent(R.id.widget1));mTabHost.addTab(mTabHost.newTabSpec("最新上架").setIndicator("最新上架").setContent(R.id.widget2));
//获得一个布局填充器,可以使用这个填充器来把xml布局文件转为View对象LayoutInflater inflater = LayoutInflater.from(this);View view = inflater.inflate(R.layout.layout, null);final TextView txtCount = (TextView) view.findViewById(R.id.txtCount);mTabHost.addTab(mTabHost.newTabSpec("探索发现").setIndicator("探索发现").setContent(R.id.widget3));mTabHost.setCurrentTab(0);int height =30;for (int i =0; i < tabWidget.getChildCount(); i++) {//设置高度tabWidget.getChildAt(i).getLayoutParams().height = height;//设置tab中标题文字,默认为黑色final TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(android.R.id.title);}//自定义lsitViewlistView = (ListView)findViewById(R.id.listview1);//使用SimpleAdapter，它是扩展性最好的适配器，可以定义各种想要的布局，而且使用很方便。listView.setAdapter(new SimpleAdapter(this, getData(),R.layout.mylist,new String[]{"title","info","img","text","sss"},new int[]{R.id.title,R.id.info,R.id.img,R.id.text,R.id.sss}));
//显示外部资源的话必须要设置ViewBinder，通过ViewBinder的绑定机制来显示网络资源adapter.setViewBinder(new SimpleAdapter.ViewBinder() {@Overridepublic boolean setViewValue(View view, Object data,String textRepresentation) {if ((view instanceof RatingBar) && (data instanceof Float)) {sss = (RatingBar) view;sss.setRating((Float) data);return true;}return false;}});listView.setAdapter(adapter);}//tabhost标签背景设置private void updateTabBackground(final TabHost mTabHost) {for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {View vvv = mTabHost.getTabWidget().getChildAt(i);if (mTabHost.getCurrentTab() == i) {//选中后的背景vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.s1));} else {//非选择的背景vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.s2));}}}//使用List与Map组合取值
private List<Map<String, Object>> getData() {List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();Map<String, Object> map = new HashMap<String, Object>();map.put("title", "QQ农场（手机）");map.put("info", "龙诹");map.put("img", R.drawable.img);map.put("text","免费软件");map.put("sss",Float.parseFloat(4 + ""));list.add(map);map = new HashMap<String, Object>();map.put("title", "机器人塔防");map.put("info", "Lupis");map.put("img", R.drawable.img1);map.put("text","免费软件");map.put("sss",Float.parseFloat(5 + ""));list.add(map);map = new HashMap<String, Object>();map.put("title", "植物大战僵尸");map.put("info", "梁振宇");map.put("img", R.drawable.img2);map.put("text","免费软件");map.put("sss",Float.parseFloat(1 + ""));list.add(map);map = new HashMap<String, Object>();map.put("title", "明珠三国");map.put("info", "Pipeline");map.put("img", R.drawable.img3);map.put("text","免费软件");map.put("sss",Float.parseFloat(2 + ""));list.add(map);map = new HashMap<String, Object>();map.put("title", "黄金矿工");map.put("info", "Game");map.put("img", R.drawable.img4);map.put("text","免费软件");map.put("sss",Float.parseFloat(3.5 + ""));list.add(map);map = new HashMap<String, Object>();map.put("title", "钢丝英雄");map.put("info", "Good Team");map.put("img", R.drawable.img5);map.put("text","免费软件");map.put("sss",R.drawable.sss2);list.add(map);return list;
}}

Nactivity.java的代码：为了调试的界面，没有东西放

package com.example.lenovo.softwaremarket;import android.app.Activity;
import android.os.Bundle;/*** Created by lenovo on 2017/3/26.*/public class NActivity extends Activity {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.normal);}
}

布局代码：
main.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:background="#B0C4DE"><Gallery
        android:id="@+id/gallery"android:layout_width="368dp"android:layout_height="wrap_content"android:spacing="2dp"android:unselectedAlpha="0.6"android:visibility="visible"/><TabHost
        android:layout_width="match_parent"android:layout_height="match_parent"android:id="@android:id/tabhost"><LinearLayout
        android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><FrameLayout
            android:id="@android:id/tabcontent"android:layout_weight="1"android:layout_width="match_parent"android:layout_height="match_parent" /><TabWidget android:id="@android:id/tabs"android:layout_alignParentBottom="true"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout></TabHost>
</LinearLayout>

subtab.xml的代码：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/mytabhost"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayout android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><!-- 注意FrameLayout\TabWidget标签的位置--><TabWidget
            android:id="@android:id/tabs"android:layout_alignParentBottom="true"android:layout_width="match_parent"android:layout_height="wrap_content"/><FrameLayout
            android:id="@android:id/tabcontent"android:layout_weight="1"android:layout_width="match_parent"android:layout_height="match_parent" ><LinearLayout
                android:id="@+id/widget1"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ListView android:id="@+id/listview1"android:layout_width="match_parent"android:layout_height="match_parent"></ListView></LinearLayout><LinearLayout
                android:id="@+id/widget2"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextView
                    android:layout_width="match_parent"android:layout_height="match_parent"android:text="没有最新上架！"/></LinearLayout><LinearLayout
                android:id="@+id/widget3"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextView
                    android:layout_width="match_parent"android:layout_height="match_parent"android:text="探索发现的，没有！"/></LinearLayout></FrameLayout></LinearLayout>
</TabHost>

normal.xml的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content">
<TextView
    android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="这里是个新页面！"/>
</LinearLayout>

mylist.xml的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="wrap_content"><LinearLayout
      android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageView android:id="@+id/img"android:layout_width="100px"android:layout_height="100px"android:layout_margin="6px" /><LinearLayout
      android:orientation="vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"><TextView
         android:id="@+id/title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000000"android:textSize="30px" /><TextView
         android:id="@+id/info"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000000"android:textSize="25px" /></LinearLayout><LinearLayout
         android:orientation="vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"><TextView
      android:id="@+id/text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:textColor="#0000ff"android:textSize="25px"/><ImageView android:id="@+id/sss"android:layout_width="100px"android:layout_height="100px"android:layout_margin="3px" /></LinearLayout></LinearLayout>
</LinearLayout>

mylist.xml的listview的布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="wrap_content"><LinearLayout
        android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/aliceblue" ><ImageView
        android:id="@+id/img"android:layout_width="100px"android:layout_height="100px"android:layout_margin="6px" /><LinearLayout
        android:orientation="vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"><TextView
            android:id="@+id/title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000000"android:textSize="30px" /><TextView
            android:id="@+id/info"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000000"android:textSize="25px" /></LinearLayout><LinearLayout
            android:orientation="vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"><TextView
        android:id="@+id/text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:textColor="#0000ff"android:textSize="25px"/><RatingBar
                android:id="@+id/sss"android:numStars="5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:rating="3.5"android:stepSize="0.1"style="?android:attr/ratingBarStyleSmall"android:isIndicator="false"/></LinearLayout></LinearLayout>
</LinearLayout>

layout.xml子Tabhost中探索发现标签的布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:background="@null"android:id="@+id/rlayout"android:layout_width="wrap_content"android:layout_height="wrap_content" ><TextView
            android:id="@+id/icon"android:src="@android:drawable/ic_menu_mylocation"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="探索发现"/><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="GG"android:background="@drawable/gg"android:textSize="13dp"android:textStyle="bold"android:textColor="#FFFFFF"android:paddingLeft="3dp"android:paddingRight="3dp"android:layout_margin="0dp"android:layout_alignParentRight="true"android:id="@+id/txtCount" /></RelativeLayout>

AndroidManifest.xml的配置代码

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.example.lenovo.softwaremarket"><application
        android:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:supportsRtl="true"android:theme="@style/AppTheme"><activity android:name=".MainActivity"android:label="@string/app_name"><intent-filter>--><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter>--></activity><activity android:name=".Subtabsss"/><activity android:name=".NActivity"/></application></manifest>

在这次的设计过程中，我发现放入Gallery的图片不能太大，不然会拖慢模拟机或者在真机上调试的运行速度。放入小尺寸的图片就能加快在模拟器运行该程序的速度。

Android手机UI设计---软件市场界面设计相关推荐

不同品牌android手机ui,三种不同界面的安卓系统_华为手机_手机Android频道-中关村在线...
虽然三款产品均搭载的是谷歌Android智能系统,但同时也都植入了各家自己研发的操作界面,红米Note是MIUI V5,酷派大神F1是CoolLife UI,华为荣耀畅玩版是Emotion UI,这三 ...
论述一款软件的界面设计与设计重点是什么？
智能手机普及以后,相信许多人都知道手机APP是什么了,然而一款让人过目不忘的软件,离不开精心的设计,界面设计是人与机器之间传递和交换信息的媒介,近年来,随着信息技术与计算机技术的迅速发展,市场上出现了 ...
Android Studio 开发–微信APP门户界面设计
Android Studio 开发–微信APP门户界面设计本次Github代码仓库 --crcr1013/MyWechat 文章目录 Android Studio 开发--微信APP门户界面设计前 ...
android qq功能实现原理,Android QQ、微信聊天消息界面设计原理与实现
Android QQ.微信聊天消息界面设计原理与实现原理:Android平台上,典型的以腾讯的QQ.微信这些聊天消息界面通常可以采用ListView设计与实现,需要使用ListView 适配器 ...
软件设计方案(界面设计)
用户界面设计规范用户界面:又称人机界面,实现用户与计算机之间的通信,以控制计算机或进行用户与计算机之间的数据传送的系统部件. GUI:即图形用户界面,一种可视化的用户界面,它使用图形界面代替正文界 ...
凸轮，凸轮设计，凸轮设计软件，凸轮设计代做
更多文章欢迎点击此处,访问我的博客凸轮,凸轮设计,凸轮设计软件,凸轮设计代做功能界面需要软件可以联系作者qq:2967615343 或者可以加群:391760293 软件是我自己写的,现在支持一 ...
android手机软件入门,新手入门Android手机必装软件之输入法篇
上一期,给大家介绍了Android手机必装软件之美化篇(https://soft.shouji.com.cn/news/407.shtml) , 这期给大家推荐Android平台上的最常用的输入法. ...
[Android] Android 手机下仿微信客户端界面 -- 微聊
Android 手机下仿微信客户端界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...
Android UI开发——Material Design界面设计【详细】
转自:http://colachan.com/post/3416 找了很多Material Design的资料,终于找到一篇比较靠谱的.能看懂的,我认为非常有用的学习资料,就像他们说的,只要你按Mat ...

Android手机UI设计---软件市场界面设计

Android手机UI设计---软件市场界面设计相关推荐

最新文章

热门文章