app具体介绍界面-01
在我们的上一篇博客中,我们介绍了首页中的app列表界面怎样完毕。这个ListView以及其Adapter会在我们后面的界面中重用,所以这个是比較重要的,在这一篇博客中,我们先完毕app具体介绍界面的一部分,当我们点击ListView的每个item的时候,会进入我们这个界面进行app的具体介绍。
我们先来看一下效果图。
这个小界面还是比較简单的。
首先我们先要完毕上面的一个导航栏,当中包含左面的箭头和中间的文字以及颜色。
我们在res/layout目录以下创建一个新的文件。命名为activity_app_detail.xml
我们先来看一下上面的导航栏的代码:
<RelativeLayout
android:id="@+id/rl_app_detail_title"
android:layout_width="fill_parent"
android:layout_height="@dimen/bar_height"
android:layout_alignParentTop="true"
android:background="@color/mbarcolor" >
<TextView
android:id="@+id/tv_app_detail_back"
android:layout_width="@dimen/bake_size"
android:layout_height="@dimen/bake_size"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="@drawable/button_back"
android:clickable="true"
android:gravity="center" />
<TextView
android:id="@+id/tv_app_detail_appName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="详情"
android:textColor="@color/white"
android:textSize="24sp"
android:textStyle="bold" />
</RelativeLayout>
以下我们看一下,颜色mbarcolor的定义,该颜色定义在res/color/color.xml 文件里。代码例如以下:
<color name="mbarcolor">#29abe2</color>
以下我们来定义后面的那个显示app图片和其它信息的显示界面。我们在文件activity_app_detail.xml文件里接着续上后面的代码:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/rl_app_detail_title" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="@+id/rl_general"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/mbarcolor" >
<ImageView
android:id="@+id/iv_app_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:background="@drawable/icon4" />
<RelativeLayout
android:id="@+id/rl_tv_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="3dip"
android:layout_marginTop="5dp"
android:layout_toRightOf="@+id/iv_app_icon" >
<TextView
android:id="@+id/tv_app_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="酷我音乐"
android:textColor="@color/white"
android:textSize="18sp" />
<LinearLayout
android:id="@+id/ll_rank"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_app_name"
android:layout_marginTop="3dp"
android:orientation="horizontal" >
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:background="@drawable/star_on" />
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:background="@drawable/star_on" />
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:background="@drawable/star_on" />
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:background="@drawable/star_on" />
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:background="@drawable/star_off" />
</LinearLayout>
<RelativeLayout
android:id="@+id/rl_down_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/ll_rank"
android:layout_marginTop="3dp" >
<TextView
android:id="@+id/tv_app_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="18.92M"
android:textColor="@color/white"
android:textSize="12sp" >
</TextView>
<TextView
android:id="@+id/tv_down_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_toRightOf="@id/tv_app_size"
android:text="57288次下载"
android:textColor="@color/white"
android:textSize="12sp" />
</RelativeLayout>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="@id/iv_app_icon"
android:layout_marginTop="5dp" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
在这里我们定义成ScrollView,由于在后面还有非常多内容须要加入。
好了,这里我们就定义好我们的界面了,接着。我们创建一个Activity来显示该界面,以及为首页上的ListView加入监听来跳转到这个界面中来。
在src/com.sdu.activities中创建AppDetailInfoActivity,继承自BaseActivity.
package com.sdu.activities;
import com.sdu.androidmarket.R;
import android.view.View;
import android.view.Window;
import android.widget.TextView;
public class AppDetailInfoActivity extends BaseActivity {
private TextView tv_app_detail_back;
@Override
public void initWidget() {
// TODO Auto-generated method stub
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_app_detail);
tv_app_detail_back = (TextView)findViewById(R.id.tv_app_detail_back);
tv_app_detail_back.setOnClickListener(this);
}
@Override
public void widgetClick(View v) {
// TODO Auto-generated method stub
switch(v.getId()){
case R.id.tv_app_detail_back:
AppDetailInfoActivity.this.finish();
break;
}
}
}
接下来,我们来看一下HomeActivity中ListView的监听。
lv_apps.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?
> parent, View view,
int position, long id) {
// TODO Auto-generated method stub
Intent intent = new Intent(HomeActivity.this,AppDetailInfoActivity.class);
startActivity(intent);
}
});
好了,这样总体的工作就完毕了。对了。千万不要忘记在AndroidManifest.xml中注冊该Activity。
<activity android:name="com.sdu.activities.AppDetailInfoActivity" >
</activity>
这样,这个小界面就完毕了,大家自己完毕一下。看一下吧。在以下的文章中,我们继续完毕我们的app具体界面的介绍。
app具体介绍界面-01的更多相关文章
- 【app】Appium-desktop界面介绍
在appium主界面的host输入127.0.0.1 然后点击Start Server即可开启appium server 我们来说说advanced选项 Server Address: 为appium ...
- Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面
Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面 关于欢迎界面 很多App第一次启动都会有一个欢迎界面,欢迎界面往往决定这用户对App的第一映像,所以欢 ...
- App自动化测试-1.App自动化介绍和环境搭建
App自动化测试-1.App自动化介绍和环境搭建 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-b ...
- app让个别界面横屏,其他的为竖屏,解决如下
app让个别界面横屏,其他的为竖屏,解决如下 APP设置里面,一定要设置可以旋转的方向 appdelegate里面重新系统方向代理 func application(application: UIAp ...
- 飞达资讯App总体介绍及关系架构图
飞达资讯App总体介绍: 下图为飞达资讯App的关系架构图: 该App关系架构图所需的图片云盘链接地址:http://pan.baidu.com/s/1gfHIe4b 提取密码:x1nr 该App的云 ...
- [原创]互联网金融App测试介绍
[原创]互联网金融App测试介绍 前端时间非常忙,终于非常忙的时间过去了,抽时间总结下我现在所在公司理财软件App测试,也各位分享下,也欢迎大家提建议,谢谢! 先介绍下我所在公司的产品特点,公司所研发 ...
- iOS 6 的 Smart App Banners 介绍和使用
iOS 6 的 Smart App Banners 介绍和使用 Denis 留言: 10 浏览:4890 文章目录[隐藏] 什么是 Smart App Banners 在你的网站添加 Smart Ap ...
- Android学习笔记-App初始启动界面实现
android手机上的很多应用程序启动时都会先显示一个图片,作为该应用程序的开始,该图片转瞬即逝.这个图片一般都会用应用的图标,作为广告来用. 例如: 它的实现方式很简单,我们以一个测试APP为例,介 ...
- 用Vue.js开发一个电影App的前端界面
我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...
随机推荐
- failed to execute goal org.apache.maven.plugins:maven-archetype-plugin错误解决方法
使用maven创建project时碰到如下错误: D:\codes\JSF>mvn archetype:create -DgroupId=com.tutorialspoint.test -Dar ...
- PAT Basic 1070
1070 结绳 给定一段一段的绳子,你需要把它们串成一条绳.每次串连的时候,是把两段绳子对折,再如下图所示套接在一起.这样得到的绳子又被当成是另一段绳子,可以再次对折去跟另一段绳子串连.每次串连后,原 ...
- 18,OS模块
import os print(os.getcwd())#执行所在的目录 # os.makedirs('\python作业\景s12\day18')#可生成多层递归目录 # os.mkdir('\py ...
- luogu3755 [CQOI2017]老C的任务
扫描线水题. #include <algorithm> #include <iostream> #include <cstdio> using namespace ...
- Cocoa-Cocoa对象
2.Cocoa对象 2.1 Objective-C是面向对象的语言 Objective-C和Java C++一样,有封装,继承,多态,重用.但是它不像C++那样有重载操作法.模版和多继承,也没有Jav ...
- jsp jstl标签库 el表达式
一.JSTL标签是什么? 提供了对国际化(I18N)的支持,它可以根据发出请求的客户端地域的不同来显示不同的语言. 同时还提供了格式化数据和日期的方法.实现这些功能需要I18N格式标签库(I18N-c ...
- Educational Codeforces Round 24
A. Diplomas and Certificates time limit per test 1 second memory limit per test 256 megabytes input ...
- 08-为数组和arguments
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 移动端没有session怎么处理
(转:https://my.oschina.net/wanglihui/blog/150726) 手机客户端与服务器端的通信,不同于浏览器与服务器端的通信.浏览器和服务器端的通信依靠session去维 ...
- 用docker弹性部署自己的服务
很久不看docker的东西了,之前了解的一些基本命令都忘得差不多了,适逢工作需要,再来复习巩固下.今天想完成的是:借助docker不部署下自己的服务. 环境准备 都说“巧妇难为无米之炊”,所以还是需要 ...