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

本文介绍了一个Android手机UI设计案例,专注于“软件市场”界面的创建。使用Gallery实现顶部图片滑动,TabHost完成底部类别分类,内部嵌套了SubTab和自定义ListView。设计过程中强调了图片大小对性能的影响,并分享了阿里巴巴矢量图标库资源链接。源码包括MainActivity.java、GalleryAdapter.java、Subtabsss.java等文件,以及多个XML布局文件。
摘要由CSDN通过智能技术生成

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

界面设计由来: 这是一个手机的“软件市场”设计界面,下面的代码与截图主要是完成它的界面设计。
这是Android手机的“软件市场”的界面设计图
我的运行效果截图: 有点丑,看看就好。
在这里,我给你们分享一个矢量图标库,很好用。
阿里巴巴矢量图标库: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
    
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值