名片夹android布局代码,自制控件4——仿名片全能王iOS下拉名片详情

最新推荐文章于 2022-11-08 21:54:57 发布
最新推荐文章于 2022-11-08 21:54:57 发布
阅读量300 收藏
点赞数
文章标签： 名片夹android布局代码

本文出自 “阿敏其人” 简书博客，转载或引用请注明出处。

嗯，打开名片全能王扫描名片详情，我们发现iOS和Android的样式是不一样的，简单来说，iOS的好看一些。大概如下图

485b9b340436

iOS下拉名片详情.gif

既然这样，就来简单地仿造一个Android版吧。

先看仿造后的成品效果图：

485b9b340436

android.gif

大概的功能是出来的，接下来，上代码。

一、自定义拉伸控件

分析：把要自定义的控件分为两个部分，一个是顶部部分，简称为upPart，一个是底部部分，简称为downPart。

upPart 就是上面的那张图片，仅此而已。

downPart 就是下面的灰色覆盖层和很多文字信息。

一、1、准备好的两个布局文件

upPart 布局

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="160dp">

android:id="@+id/mIvTopPic"

android:layout_width="match_parent"

android:layout_height="160dp"

android:background="#66ff0000"

/>

.

.

.

downPart 布局

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="160dp"

android:background="#66383636">

android:id="@+id/mIvCircle"

android:layout_width="50dp"

android:layout_height="50dp"

android:background="@drawable/shape_circle_gray_white"

android:layout_centerHorizontal="true"

android:layout_marginTop="20dp"

android:text="蒙"

android:gravity="center"

android:textSize="20sp"

/>

android:id="@+id/mIvDownGrayPic"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"

android:layout_centerHorizontal="true"

android:layout_below="@id/mIvCircle"

android:text="蒙奇-D-路飞"

android:gravity="center"

android:textSize="20sp"

android:textColor="#ffffff"

/>

android:layout_width="match_parent"

android:layout_height="56dp"

android:text="TEXT 1"

android:background="#660000FF"

android:layout_margin="10dp"

android:gravity="center"

/>

android:layout_width="match_parent"

android:layout_height="56dp"

android:text="TEXT 2"

android:background="#660000FF"

android:layout_margin="10dp"

android:gravity="center"

/>

android:layout_width="match_parent"

android:layout_height="56dp"

android:text="TEXT 3"

android:background="#660000FF"

android:layout_margin="10dp"

android:gravity="center"

/>

android:layout_width="match_parent"

android:layout_height="56dp"

android:text="TEXT 4"

android:background="#660000FF"

android:layout_margin="10dp"

android:gravity="center"

/>

android:layout_width="match_parent"

android:layout_height="56dp"

android:text="TEXT 5"

android:background="#660000FF"

android:layout_margin="10dp"

android:gravity="center"

/>

android:layout_width="match_parent"

android:layout_height="56dp"

android:text="TEXT 6"

android:background="#660000FF"

android:layout_margin="10dp"

android:gravity="center"

/>

android:layout_width="match_parent"

android:layout_height="56dp"

android:text="TEXT 1"

android:background="#660000FF"

android:layout_margin="10dp"

android:gravity="center"

/>

.

.

.

一、2、自定义控件 StretchView

过程的大概这么走：

1、onMeasure测量一下

2、onLayout布局摆放位置

3、利用onTouchEvent和viewDragHelper实现平滑滚动

主要逻辑就在StretchDraeHelper里面

A：为了实现类似下拉回弹的效果，我们简单地直接在clampViewPositionVertical里面返回top。不做严格的边界控制。

@Override

public int clampViewPositionVertical(View child, int top, int dy) {

//return super.clampViewPositionVertical(child, top, dy);

showTag("clampViewPositionVertical "+ top);

// 颜色的边界控制

/*if(top<0){

return 0;

}else if(top>mUpPartHeight){

return mUpPartHeight;

}*/

return top;

}

B：正常来说，我们以为upPart的高度作为伸缩/展开的临界判断标准，但是为了向上或者向下的速度足够快的时候，也执行伸缩或者展开，我们另外进行了判断：

@Override

public void onViewReleased(View releasedChild, float xvel, float yvel) {

// 方法的参数里面没有top，那么我们就采用 getTop()这个方法

int releasePartTop = mDownPart.getTop();

showTag("记录 yvel "+yvel);

float changeStatuValue = 200;

if(yvel>changeStatuValue && isFullStretch == false){ // 关闭状态下,向下的滑动速率足够即使不到一半也展开downPartView

openStretchView();

}else if(yvel

closeStretchView();

}else{ // 普通滑动速率,以为upPart的中间点为临界点

if((mUpPartHeight*0.5)>releasePartTop){

//mDownPart.layout(0,0, mUpPartWidth, mUpPartHeight);

// 利用smoothSlideViewTo 产生平滑过渡的效果 (需要结合invalidate)

closeStretchView();

}else{

//mDownPart.layout(0, mUpPartHeight,mDownPartWidth, mUpPartHeight + mDownPartHeight);

openStretchView();

}

}

invalidate();

super.onViewReleased(releasedChild, xvel, yvel);

}

public class StretchView extends ViewGroup{

public static String TAG = "STRETCH";

private View mUpPart; // 上半部分

private View mDownPart; // 下半部分

private ViewDragHelper viewDragHelper;

private int mUpPartWidth;

private int mUpPartHeight;

private int mDownPartWidth;

private int mDownPartHeight;

private boolean isFullStretch = true;

public StretchView(Context context) {

super(context);

}

public StretchView(Context context, AttributeSet attrs) {

super(context, attrs);

}

public StretchView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

}

@Override

protected void onFinishInflate() {

super.onFinishInflate();

mUpPart = getChildAt(0);

mDownPart = getChildAt(1);

viewDragHelper = ViewDragHelper.create(this,new StretchDraeHelper());

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

//super.onMeasure(widthMeasureSpec, heightMeasureSpec);

// measure upPart

LayoutParams upPartLayoutParams = mUpPart.getLayoutParams();

int upPartMeasureHeight = MeasureSpec.makeMeasureSpec(upPartLayoutParams.height,MeasureSpec.EXACTLY);

mUpPart.measure(widthMeasureSpec,upPartMeasureHeight);

// measure downPart

LayoutParams downLayoutParams = mDownPart.getLayoutParams();

int downMeasurePartHeight = MeasureSpec.makeMeasureSpec(downLayoutParams.height,MeasureSpec.EXACTLY);

mDownPart.measure(widthMeasureSpec,downMeasurePartHeight);

setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);

}

@Override

protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

mUpPartWidth = mUpPart.getMeasuredWidth();

mUpPartHeight = mUpPart.getMeasuredHeight();

showTag("mUpPartWidth "+ mUpPartWidth);

showTag("mUpPartHeight "+ mUpPartHeight);

mUpPart.layout(0,0, mUpPartWidth, mUpPartHeight); // 摆放上部分的位置

mDownPartWidth = mDownPart.getMeasuredWidth();

mDownPartHeight = mDownPart.getMeasuredHeight();

showTag("mDownPartWidth "+ mDownPartWidth);

showTag("mDownPartHeight "+ mDownPartHeight);

mDownPart.layout(0, mUpPartHeight,

mDownPartWidth, mUpPartHeight + mDownPartHeight); // 摆放删除部分的位置

}

/**

* ViewDragHelper

*

* 使用ViewDragHelper必须复写onTouchEvent并调用这个方法,才能使touch被消费

*/

class StretchDraeHelper extends ViewDragHelper.Callback{

/**

* Touch的down事件会回调这个方法 tryCaptureView

*

* @Child：指定要动的孩子 (哪个孩子需要动起来)

* @pointerId: 点的标记

* @return : ViewDragHelper是否继续分析处理 child的相关touch事件

*/

@Override

public boolean tryCaptureView(View child, int pointerId) {

return mDownPart == child;

}

/**

*

* 捕获了水平方向移动的位移数据

* @param child 移动的孩子View

* @param left 父容器的左上角到孩子View的距离

* @param dx 增量值，其实就是移动的孩子View的左上角距离控件(父亲)的距离，包含正负

* @return 如何动

*

* 调用完此方法，在android2.3以上就会动起来了，2.3以及以下是海动不了的

* 2.3不兼容怎么办？没事，我们复写onViewPositionChanged就是为了解决这个问题的

*/

@Override

public int clampViewPositionHorizontal(View child, int left, int dx) {

return super.clampViewPositionHorizontal(child, left, dx);

}

/**

* 捕获了垂直方向移动的位移数据

* @param child

* @param top

* @param dy

* @return

*/

@Override

public int clampViewPositionVertical(View child, int top, int dy) {

//return super.clampViewPositionVertical(child, top, dy);

showTag("clampViewPositionVertical "+ top);

// 颜色的边界控制

/*if(top<0){

return 0;

}else if(top>mUpPartHeight){

return mUpPartHeight;

}*/

return top;

}

/**

* 当View的位置改变时的回调

* @param changedView 哪个View的位置改变了

* @param left changedView的left

* @param top changedView的top

* @param dx x方向的上的增量值

* @param dy y方向上的增量值 取值范围为 ±24000 之间 向下为正,向上负

*/

@Override

public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {

invalidate();

showTag("onViewPositionChanged "+ top);

showTag("onViewPositionChanged "+ left);

super.onViewPositionChanged(changedView, left, top, dx, dy);

}

@Override

public void onViewReleased(View releasedChild, float xvel, float yvel) {

// 方法的参数里面没有top，那么我们就采用 getTop()这个方法

int releasePartTop = mDownPart.getTop();

showTag("记录 yvel "+yvel);

float changeStatuValue = 200;

if(yvel>changeStatuValue && isFullStretch == false){ // 关闭状态下,向下的滑动速率足够即使不到一半也展开downPartView

openStretchView();

}else if(yvel

closeStretchView();

}else{ // 普通滑动速率,以为upPart的中间点为临界点

if((mUpPartHeight*0.5)>releasePartTop){

//mDownPart.layout(0,0, mUpPartWidth, mUpPartHeight);

// 利用smoothSlideViewTo 产生平滑过渡的效果 (需要结合invalidate)

closeStretchView();

}else{

//mDownPart.layout(0, mUpPartHeight,mDownPartWidth, mUpPartHeight + mDownPartHeight);

openStretchView();

}

}

invalidate();

super.onViewReleased(releasedChild, xvel, yvel);

}

/**

* 整个View拓展起来

*/

private void openStretchView() {

viewDragHelper.smoothSlideViewTo(mDownPart,0,mUpPartHeight);

isFullStretch = true;

}

/**

* 整个view收缩起来

* @return

*/

private void closeStretchView() {

viewDragHelper.smoothSlideViewTo(mDownPart,0,0);

isFullStretch = false;

}

}

@Override

public void computeScroll() {

//super.computeScroll();

// 把捕获的View适当的时间移动，其实也可以理解为 smoothSlideViewTo 的模拟过程还没完成

if(viewDragHelper.continueSettling(true)){

invalidate();

}

// 其实这个动画过渡的过程大概在怎么走呢？

// 1、smoothSlideViewTo方法进行模拟数据，模拟后就就调用invalidate();

// 2、invalidate()最终调用computeScroll，computeScroll做一次细微动画，

// computeScroll判断模拟数据是否彻底完成，还没完成会再次调用invalidate

// 3、递归调用，知道数据noni完成。

}

@Override

public boolean onTouchEvent(MotionEvent event) {

//return super.onTouchEvent(event);

/**Process a touch event received by the parent view. This method will dispatch callback events

as needed before returning. The parent view's onTouchEvent implementation should call this. */

viewDragHelper.processTouchEvent(event); // 使用ViewDragHelper必须复写onTouchEvent并调用这个方法

return true; //消费这个touch

}

private void showTag(String str){

Log.d(TAG,str);

}

}

二、使用 StretchView 控件

布局文件

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto"

>

android:id="@+id/mToolBar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="#00000000"

android:layout_marginTop="20dp"

android:elevation="4dp"

android:theme="@style/ThemeOverlay.AppCompat.ActionBar"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

/>

android:id="@+id/mStretchView"

android:layout_width="match_parent"

android:layout_height="match_parent">

需要注意的是，com.amqr.likepaperstretch.widget.StretchView里面的include先后顺序非常重要，不可随意颠倒。

.

.

.

ShowActivity

public class ShowActivity extends AppCompatActivity{

private Toolbar mToolBar;

private StretchView mStretchView;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_show);

mToolBar = (Toolbar) findViewById(R.id.mToolBar);

mToolBar.setTitle("Title");

mToolBar.setTitleTextColor(getResources().getColor(R.color.white));

setSupportActionBar(mToolBar);

mToolBar.setOverflowIcon(getResources().getDrawable(R.drawable.icon_menu)); // 指定菜单按钮图标

mToolBar.setNavigationIcon(R.drawable.arrow_left); // 返回箭头

mToolBar.setNavigationOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

finish();

}

});

mToolBar.setOnMenuItemClickListener(onMenuItemClick);

mStretchView = (StretchView)findViewById(R.id.mStretchView);

mStretchView.findViewById(R.id.mIvTopPic).setBackgroundResource(R.drawable.pic_default);

//Toast.makeText(ShowActivity.this,"弹出菜单",Toast.LENGTH_SHORT).show();

//只对api19以上版本有效

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

setTranslucentStatus(true);

}

}

@TargetApi(19)

private void setTranslucentStatus(boolean on) {

Window win = getWindow();

WindowManager.LayoutParams winParams = win.getAttributes();

final int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;

if (on) {

winParams.flags |= bits;

} else {

winParams.flags &= ~bits;

}

win.setAttributes(winParams);

}

// 创建关联菜单

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.menu_main,menu);

return true;

}

// 菜单的点击回调

private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {

@Override

public boolean onMenuItemClick(MenuItem menuItem) {

String msg = "";

switch (menuItem.getItemId()) {

case R.id.action_ball:

msg += "Click ball";

break;

case R.id.action_tip:

msg += "Click action_tip";

break;

case R.id.action_menu:

msg += "Click setting";

break;

}

if(!msg.equals("")) {

Toast.makeText(ShowActivity.this, msg, Toast.LENGTH_SHORT).show();

}

return true;

}

};

}

为了让Toolbar的菜单栏总是可以点击，所以我们单独放在自定义控件的上方，而不是在做自定义控件的时候就弄在一起。

我们通过这两段代码去掉标题栏，起到沉浸的效果。

//只对api19以上版本有效

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

setTranslucentStatus(true);

}

@TargetApi(19)

private void setTranslucentStatus(boolean on) {

Window win = getWindow();

WindowManager.LayoutParams winParams = win.getAttributes();

final int bits = WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS;

if (on) {

winParams.flags |= bits;

} else {

winParams.flags &= ~bits;

}

win.setAttributes(winParams);

}

大概就是这样，其实还有很多可以改进的空间的，比如弄一个伸缩或者展开实现其他需求的接口，比如提供打开或者关闭的方法，等等。如果需要，可以自行调整。

本篇完。

纯青火
关注
Android 名片夹 数据库学习源码
11-08
Android 名片夹 数据库学习源码
名片夹android布局代码,Android自定义布局实现仿qq侧滑部分代码
weixin_29504987的博客
05-26 164
自定义布局实现仿qq侧滑部分Android代码，供大家参考，具体内容如下实现说明：通过自定义布局实现：SlidingLayout继承于 HorizontalScrollView/*** Created by Administrator on 2017/3/29.*/public class SlidingLayout extends HorizontalScrollView{/** 左侧右边间距 ...
RelativeLayout相对布局
Xiang
11-05 955
相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置，这是实际布局中最常用的布局方式之一。它灵活性大很多，当然属性也多，操作难度也大，属性之间产生冲突的的可能性也大，使用相对布局时要多做些测试。 下面是常用的一些属性 RelativeLayout用到的一些重要的属性： 第一类:属性值为true或false android:la
Android代码-名片夹搜索排序.rar
08-02
名片夹搜索排序.rar
名片全能王
07-07
名片扫描软件，安装后要升级到最新版，如果需要网络备份，需要注册
名片全能王CamCard v4.4.0_20131120.apk
01-29
名片全能王,掃瞄規類名片的好幫手,很好用的android app,快樂版
ios-下拉详情.zip
07-11
下拉详情
Android名片识别源码
11-22
名片识别源码，Android名片识别源码
android 名片扫描源码NameCardRec
06-11
android 名片扫描源码NameCardRec学习使用
Android名片夹右侧索引
12-13
一个很简单的android名片夹右侧索引栏的Demo，简单易懂，很好改动。
Android代码-名片识别源码.zip
08-02
名片识别源码.zip
iOS仿淘宝详情页弹性上拉下拉效果
07-17
只包含上拉下拉效果实现DEMO，不含详情页其他内容布局代码
Android代码-仿iOS的滑动选择wheelview控件
08-06
PickerUI Android library to display a list of items for pick one with blur effect (if you wish). Support for Android 3.0 and up. It supports portrait and landscape mode, saving the state. Try out the sample application on Google Play. Demo Including in Your Project Last version is 1.0.1 Just add the following statement in your build.gradle compile 'com.github.davidpizarro:pickerui:VERSION' You may also add the library as an Android Library to your project. All the library files live in li
赵雅智_名片夹（5）_Android中listview可折叠伸缩仿手风琴效果（动态）
柠檬不萌
07-24 3809
package com.cards.activity; import java.util.List; import android.app.Activity; import android.app.AlertDialog; import android.app.AlertDialog.Builder; import android.content.Context; import android
赵雅智_名片夹（4）_Android中listview可折叠伸缩仿手风琴效果（静态）
柠檬不萌
07-23 5150
最近些一个名片夹得app。其中名片夹客户要求做成可折叠伸缩的效果，真是费了好大劲啊~~~啥都不说了看效果图吧~~ 首先姓名显示为listview效果，点击姓名像手风琴效果一样，显示余下的详细信息内容，当再次点击姓名的时候，余下详细内容便隐藏
全代码实现ios-4
Alisa200920的专栏
07-13 982
刚开始开发的时候，也曾经想用IB或Storyboard。 不过看了许多篇关于IB和Storyboard的操作文档后仍然是糊里糊涂，不由得怀疑自己的IQ。 可不可以全代码实现ios开发？当时我想。 不过以我对苹果公司的了解，心想它绝对不会拒绝给程序员一个开放的平台来开发程序吧？ 本着这样的想法，我开始大量的在网上搜索全代码开发的资料，可是真是少之又少。 在很沮丧的时候，我开始翻阅苹果官方网
认识Android Studio的相对布局
最新发布
RainBow_xiy的博客
11-08 389
【代码】认识Android Studio的相对布局。
Eclipse：开源IDE的全能王——跨平台开发的强大引擎
在调试能力方面，Eclipse内置了高效且易用的调试工具，能帮助开发者精准定位和修复代码问题，提高代码质量和效率。在应用领域，Eclipse不仅是企业级Java应用开发的首选，还涉足Android应用开发和嵌入式系统开发，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值