这是一个简单的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;
@Override
public 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));
}
}
}
@Override
public 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[]数组加入图片ID
int[] imageIDs = new int[] {
R.drawable.xx1,
R.drawable.xx2,
R.drawable.xx3,
R.drawable.xx4};
public GalleryAdapter(Context c){
this.c=c;
}
//这个属性决定Gallery控件显示多少张图片
@Override