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具体界面的介绍。
相关文章
- python3 爬虫实战 :用 Appium 抓取手机 app 微信朋友圈的数据
- 点评国内各大在线app生成平台
- app和BootLoader程序典型代码放置图
- Google Earth Engine APP(GEE) ——在GEE app发布过程中会出现的一些小bug
- Google Earth Engine APP(GEE)——一个可以时序动画监测的动态APP
- uni-app - 应用启动后自动将屏幕旋转横屏(仅APP端适用)
- uni-app - 用户点击图像放大预览功能 / 支持左右滑动与手指手势放大缩小图片(支持单图与多图、实现手机查看大图全屏预览功能),类似微信查看图片的效果,支持 App、H5、小程序等全端兼容!
- uni-app - 使用echarts 图表(H5、APP)
- uni-app - 插件[App云打包]安装失败!(app打包时显示app云打包插件安装失败)解决方案
- 【IDEA】+APP开发+打包+发布
- AppGallery Connect 移动端App新功能上线
- 《精通移动App测试实战:技术、工具和案例》一第1章 Android系统基础内容介绍1.1 Android系统介绍
- 《移动App测试的22条军规》——第23章,第5节测试微信App的用户体验
- 商家 APP 如何接入新版支付宝支付,老版本商家如何升级
- SwiftUI iOS 完整项目之基于CoreData构建购物计划App(教程含源码App Store上线app)
- macOS SwiftUI 基础之如何设置App登录即可启动(教程含源码)
- macOS App开发设计规范
- SwiftUI SQLite教程之带有历史的搜索栏List App (教程含完整代码)
- 【Android】App开发-控件篇
- 移动互联网金融app 存在信息安全问题
- 物联网平台搭建的全过程介绍(五)——基于阿里云物联网平台的Android聊天app源码
- 阿里云IoT平台APP配网入口
- vue 外卖app (1) 项目目录介绍