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

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

PS：这个我是用Android Studio2.3做的。

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

我的运行效果截图： 有点丑，看看就好。

在这里，我给你们分享一个矢量图标库，很好用。

阿里巴巴矢量图标库：/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 /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 /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 /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="/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="/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" ><LinearLayoutandroid: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><LinearLayoutandroid:id="@+id/widget2"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="没有最新上架！"/></LinearLayout><LinearLayoutandroid:id="@+id/widget3"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid: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="/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="/apk/res/android"android:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="wrap_content"><LinearLayoutandroid: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" /><LinearLayoutandroid: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"><TextViewandroid: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="/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"/><RatingBarandroid: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="/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="/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的图片不能太大，不然会拖慢模拟机或者在真机上调试的运行速度。放入小尺寸的图片就能加快在模拟器运行该程序的速度。