펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO



ListView Adapter 내부 getView 메소드에서 아래와 같은 방식 적용


public View getView(int position, View convertView, ViewGroup parent) {

.

.

.

HorizontalScrollView mScrollView = (HorizontalScrollView) convertView.findViewById(R.id.rf_horizon_scroll);

mScrollView.setOnTouchListener(new ScrollViewOnTouchListener(mScrollView, position));

.

.


}


private class ScrollViewOnTouchListener   implements View.OnTouchListener {

        HorizontalScrollView view;

        float historicX = Float.NaN;

        static final int DELTA_ON_CLICK = 30; // 이동 허용 범위

        long historicTime;

        int position;

        public ScrollViewOnTouchListener(HorizontalScrollView view, int position){

            this.view = view;

            this.position = position;

        }


        @Override

        public boolean onTouch(View v, MotionEvent event)

        {

            switch (event.getAction())

            {

                case MotionEvent.ACTION_DOWN:

    v.setBackgroundColor(Color.parseColor("#D5D5D5"));    // 터치된 리스트 아이템 색상 변경을 위한 코드

                    historicX = event.getX();

                    historicTime = System.currentTimeMillis();

                    break;


                case MotionEvent.ACTION_UP:

                    if (Math.abs(event.getX() - historicX) < DELTA_ON_CLICK) {

  // 아이템 터치시 작업할 내용

                    }

                    break;

                case MotionEvent.ACTION_CANCEL:

                    v.setBackgroundColor(Color.parseColor("#00000000"));   // UP or CANCEL 이벤트 발생 시 아이템 배경색 원상복구

                    break;

                default: return false;

            }

            return true;

        }

    }


설명 : 리스트뷰 내부에 스크롤뷰 영역은 리스트뷰의 아이템 터치이벤트가 발생하지 않는다.

          때문에 스크롤뷰에 클릭 리스너를 등록하여 최초 터지 지점(DOWN) 부터 UP 까지의 픽셀이 짧은 경우 스크롤링이 아닌

          단순 터치로 판단하고 그에 따른 이벤트를 실행하는 방법이다.

          경우에 따라 시간 필터를 추가로 적용 가능하다.



Android/View | Posted by 덩치 2016. 3. 7. 16:56

Dialog 뒤의 뷰 터치 가능하게 하기

펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO



mDialog.getWindow().setFlags(WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL, WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL);


추가


응용 : 구글맵에서 CustomDialog가 떠 있는 상태에서 다른 마커를 터치시 바로 마커 터치이벤트가 발생

          해당 옵션이 없는 상태에서 마커를 터치하면 Dialog Outside터치이벤트가 발생하고 마커 터치이벤트 발생 X



펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO



간단하게 아래와 같이 하면 된다.


Bitmap bitmap = BitmapFactory.decodeResource(getApplicationContext().getResources(), R.drawable.share_img);



펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO


이미지 크기를 절대값으로 주고 여러 단말에서 확인을 해 보면, 단말 해상도에 따라 이미지 크기가


제각각인 경우가 있다.


애초에 이미지를 선언할 때 xml에서 dp로 줘버리면 상관이 없겠지만(drawable 폴더에 제대로 분기했다는 가정 하에),


소스코드상에서 비트맵을 만들고, 그 이미지를 뿌리는 경우 참 애매하다.


이때 해상도별로 사이즈 설정을 통일되게 하는 방법에 대해 알아보자.


예를들어Height1280px인 단말기에서 알맞은 이미지 width28px, height28px 일 때,


이보다 높거나 낮은 해상도에서 그에 맞는 사이즈로 리사이징을 하기 위한 방법이다.


먼저 단말의 해상도를 구해야한다.


Drawable d = getResources().getDrawable(id);

DisplayMetrics displayMetrics = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

float deviceHeight = displayMetrics.heightPixels;


이렇게하면 deviceHeight 에는 단말의 Height 사이즈가 리턴된다.

(어떤 단말에서는 1280, 어떤 단말에서는 2500몇 .. 이런식으로)


int dp = (int) (28 * (deviceHeight / 1280));


여기서 281280은 위에서 예시를 든것과 같이


1280px의 해상도 단말에서 알맞게 표시되는 이미지 크기 28px을 뜻한다.


이렇게 하면 단말 해상도가 커지거나 작아져도 dp값이 그에 따라 커지고 작아져서


모든 단말에서 알맞은 사이즈로 이미지가 표시된다.


디테일을 요구하는 작업에서는 다른 필터링이 추가되어야하겠지만, 일반적인범위 내에서는


위 방법을 이용하면 사이즈가 알맞게 잘 표시가 되었다.




Android/View | Posted by 덩치 2014. 4. 24. 16:18

TextView에 marquee 적용하기

펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO


Marquee란, 전광판같은곳에서 문장을 좁은 공간에 표시하기위해


옆으로 이동하면서 숨겨진부분의 글자들이 표시되도록 하는것이다.


앞의 글자가 왼쪽으로 사라지고 뒤에 글자가 나타나는형식


Xml 레이아웃에서 텍스트뷰 속성에


        android:ellipsize="marquee"

        android:focusable="true"

        android:marqueeRepeatLimit="marquee_forever"

        android:singleLine="true"


를 추가 해 주면 된다.


첫번째는 marquee를 사용하겠다는 뜻이고,

두번째는 focusTextView가 가지고 있어야 하기때문에 설정한다.

세번째는 반복횟수인데, int값을 줘도 되고 저렇게 계~속 움직이도록 할 수 있다.

네번째는 텍스트뷰의 라인을 한줄로 표시하는것으로, 텍스트가 영역을 벗어날정도로 긴 경우에도

줄내림을 하지 않는다는것이다. 그래야 marquee가 적용된다.



아주 중요한것. 오늘 이것때문에 하루종일 씨름했는데,

setText 할 때 마다 marquee초기화되어 처음부터 표시되기에 setText가 자주 발생하는 뷰에 적용하기에는


성격이 맞지 않다.



Android/View | Posted by 덩치 2014. 4. 15. 10:55

간단한 얼럿다이얼로그 출력

펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO




AlertDialog.Builder builder = new AlertDialog.Builder(mContext)

.setTitle("종료")

.setMessage("프로그램을 종료 하시겠습니까?")

.setPositiveButton("예", new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dlg, int value) {

finish();

}

})

.setNegativeButton("아니요", null);

AlertDialog dialog = builder.create() ;

dialog.show() ;



아니오 버튼에도 리스너를 등록하고싶으면 예 처럼 다이얼로그인터페이스의 클릭리스너를 등록 해 주면 된다.


빌더 옵션에 .addView(view) 를 하면 LayoutInflater로 가져온 뷰를 내용에 셋팅할 수 있다.

Android/View | Posted by 덩치 2014. 4. 9. 16:13

WebView를 이용해 javascript와 통신하기

펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO


시작하기 전 주의점 : 빌드타겟 ~16 에서는 정상적으로 작동,

타겟 17이상부터는 호출되는 메소드에 @JavascriptInterface 어노테이션을 반드시 추가 해 주어야함


WebView로 띄운 페이지와 App간에 메시지를 주고 받는 방법에 대해 알아보자.


우선 웹뷰를 생성한다.

WebView mWebView ;

mWebView = (WebView) findViewById(R.id.webview);


그리고  웹뷰의 세팅을 자바스크립트를 사용가능하도록 선언한다 (default : false)

mWebView.getSettings().setJavaScriptEnabled(true);


그리고 자바스크립트로부터 데이터를 전달받을 클래스를 생성 해 준다.


private class AndroidBridge {

    public void setMessage(final String arg) {

    handler.post(new Runnable() {

    public void run() {

    mTextView.setText("받은 메시지 : \n" + arg);

    }

    });

    }

    }


자바스크립트에서 AndroidBridge라는 클래스로 메시지를 보내 줄 수 있게 하기 위해서 다음과 같이 선언한다.

mWebView.addJavascriptInterface(new AndroidBridge(), "android");

이제 자바스크립트에서는 AndroidBridge()에 "android"라는 이름으로 접근할 수 있게 되었다.


그리고 웹뷰에 표시할 url을 셋팅 해 준다.

mWebView.loadUrl("file:///android_asset/javapage.html");


자바스크립트 파일 : 

본인은 프로젝트의 assets 폴더javapage.html 이라는 로컬파일을 만들어서 넣고 해당 경로를 선언했다.

첨부 : 

javapage.html

파일 안의 내용은

<html>

<head>

<script language="JavaScript">

function setMessage(arg) {

 document.getElementById('textMessageFromApp').innerHTML = arg;

function sendMessage(msg){

window.android.setMessage(msg);

}

</script>

<style>

input {

position:absolute; top:100%; margin-top:-80px;

}

</style>

</head>

<body>

<hr/>

<h2>WebView와의 통신</h2>

<hr/>

<br/>

받은 메시지 :

<p id="textMessageFromApp" style="height:200px; overflow-y:auto;"> 

</p>

<hr/>

<input type="text" id="textMessageToApp"  value="App으로 전송"/>

<input type="button" value="Send Message" onclick="sendMessage(document.getElementById('textMessageToApp').value)" style="left:50%;"/>

</body>

</html>


중요한부분은 녹색으로 표시 했고,

자세한건 나머지 소스를 보면서 설명하겠다.


App - > 자바스크립트로 메시지 전달 :


아래 소스코드는 에디트텍스트에 적은 내용을 웹뷰로 날려주는것인데, 버튼클릭리스너 등에서 사용한다.

mWebView.loadUrl("javascript:setMessage('" + mEditText.getText() + "')");


이렇게 메시지를(mEditText.getText() 를 javascript:setMessage( ); 에 날려주게되면,

javapage.html 파일의 setMessage 부분에 arg로 값이 전달된다.


html파일에서는 arg로 값을 받아서 textMessageFromApp이라는 텍스트뷰에 표시해 주고 있다.


자바스크립트 - > App으로 메시지 전달 :

페이지의 버튼을 클릭하면 onclick 안의 내용이 실행되면서 textMessageToApp 텍스트뷰의 내용이

sendMessage를 통해 전달된다. sendMessage 부분을 보면


window.android.setMessage(msg);

이렇게 돼 있는데, 아까전에 위에서

mWebView.addJavascriptInterface(new AndroidBridge(), "android");

라고 인터페이스를 추가한 것을 기억해 보면 초록색 소스코드가 이해될것이다.

자바스크립트에서 android라는 이름으로 setMessage를 해 주는 것이다.


이렇게 되면 안드로이드의 AndroidBridge클래스에서 메시지를 받아서 텍스트뷰의 내용을

자바스크립트에서 보낸 msg로 출력된다.



이상으로 안드로이드와 자바스크립트간의 양방향 메시지 전달 방법에 대해 알아보았다.


예제 프로젝트 :

WebView_Javascript.zip


(참조 : http://blog.daum.net/kwh4865/13153880)




Android/View | Posted by 덩치 2014. 4. 3. 16:21

나인패치 (9patch) 이미지 만드는 방법

펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO

나인패치 이미지란


(http://developer.android.com/tools/help/draw9patch.html) <- 디벨로퍼사이트의 나인패치에 대한 설명


해상도가 다른 단말기에서 아이콘 등이 확대 될 때, 확대 되는 영역을 특정지어서 확대되서


픽셀이 깨지는 (라운드,그라데이션) 현상 없이 확대되는 이미지.


확대되도록 설정한 영역 이외의 부분은 확대가 되지 않는다.


쉽게말해 말풍선 같은 이미지를 네 모서리와 하단 꼭짓점 크기는 고정시키고 안의 크기만 늘려주며,


고정된 해상도라기 보다 어떤 해상도로 늘어나더라도 이미지가 깨지지 않도록 하는 방식이다.


다음 이미지를 보자




위 이미지가 나인패치 이미지이다. 확장자가 .9.png로 특이한 형태를 취하고 있으며,


풍선 주위에 검은색 선은 확장 영역과 콘텐츠 영역을 표시하는것으로, 실제 이미지가 적용되면 나타나지 않는다.


나인패치 사용법에 앞서 우선 위의 이미지가 어떻게 확장되는지 설명을 하자면


다음 이미지를 보며 설명해주겠다.




왼쪽변의 검은 선은 세로로 확장되는 영역, 상단변의 짧은 선 두개는 각각 세로로 확장되는 영역이며,


우측변의 검은 선은 콘텐츠(텍스트 등)가 들어가는 세로영역, 하단의 변은 마찬가지 콘텐츠가 들어가는 가로 영역이다.


분홍색 기둥 두개가 보일텐데, 간단히 말해 저 두개의 영역이 확대,축소되며 이미지를 표시한다.


즉, 노란부분과 분홍색 막대 상,하단, 왼쪽분홍막대 좌측, 오른쪽 분홍막대 우측 영역은


이미지 크기가 불변한다. (돼지꼬리)


분홍색 막대만이 가로,세로로 확장되고 축소되며 전체 이미지가 커지거나 작아지는것처럼 표시된다.


그렇기때문에 작은 해상도에서는 라운드가 엄청 커보이지만, 큰 해상도에서는 라운드가 작아보이게 되고


엄청 커지면 라운드는 거의 없는것처럼 보이게 된다.


밑의 말풍선 꼬리 영역도 마찬가지로 크기가 변하지 않는다.


위 이미지처럼 라운드가 있거나, 또는 그라데이션이 있어서 그라데이션 영역은 확장하지 않고, 이외의 부분만


확장될 수 있을 때, 나인패치 이미지를 사용한다.


나인패치의 한계는 하트모양이나 동그라미처럼 특정 영역만 확대하면 모양이 이상해져버리는 


도형에는 사용할 수 없다는것이다.


나인패치를 만드는법을 알아보자. 우선 이미지를 준비한다. 포토샵으로 그려도 되고 기존의 이미지를 사용해도 된다.



나는 간단하게 아래의 이미지로 실습을 해 보겠다.




다음은 나인패치 이미지를 만들 수 있는 툴을 실행시킨다.

(툴은 안드로이드 sdk에 있으며, 툴이 없는 경우 포토샵으로 맨처음 이미지처럼 만들고, 확장자를 name.9.png 식으로 저장하여도 된다.)


나의 경로는

adt-bundle-windows-x86_64-20130522 -> sdk -> tools -> draw9patch.bat


draw9patch.bat 파일을 실행시키면 잠시후 다음과 같은 창이 나타나는데,




이미지를 드래그해서 위 창에 드랍시킨다.




그럼 이렇게 표시된다. 우측은 미리보기이고..


상하좌우 맨 마지막 1픽셀을 마우스로 클릭하여 드래그하면 검은색 선이 생기는데,


이런 방식으로 영역을 설정 해 준다.


일반적으로.콘텐츠영역은 확대되는 영역의 최대 영역으로 설정한다.


영역 취소는 시프트를 누르고 클릭 하여 드래그하면 된다.




(이런식으로 색상이 구분되는것은 하단에 show patches 를 체크해 주면 된다.)


분홍색 부분이 확대되는 영역, 초록색과 붉은부분이 확대되지 않는 영역이며


우측을 보면 확대를 엄청 했을경우 미리보기인데, 라운드부분은 확대되지 않아서 상대적으로 작아보인다.


하지만 이런 특성 덕분에 라운드가 깨져보일 염려는 없다.




나름대로 알아듣기 쉽게 설명하기 위해 노력했는데 잘 전달 되었는지 모르겠습니다.


문의사항은 댓글 남겨주세요



펌 환영. 출처만 남겨주세요



Android/View | Posted by 덩치 2014. 2. 4. 11:50

레이아웃의 종류와 사용법

펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO

자주 사용하게 되는 레이아웃 3가지만 다루겠다.


1. LinearLayout

뷰가 가로 또는 세로로 순차적으로 나열되는 레이아웃.



보는바와 같이 android:orientation 옵션을 통해 가로(horizontal) 또는 세로(vertical)로 설정할 수 있으며

따로 선언하지 않는다면 디폴트로 horizontal이 적용된다.

가장 사용하기 편리한 레이아웃이라고 생각함



2. RelativeLayout

따로 위치를 지정하지 않으면 뷰가 0,0 위치에 계속 쌓이는 레이아웃으로,

최상위 부모 레이아웃 상대위치 또는 id를 참조해 특정 뷰에 대해 상대적인 위치를 지정할 수 있다.

약간 까다로울 수 있는 레이아웃인데 예제를 보자.




위와같이 따로 위치를 지정하지 않으면 저렇게 다 겹쳐서 출력된다.

위치를 지정해 보자.


(클릭해서 보세요)

이런식으로 지정해 줄 수 있다.

RelativeLayout은 사용법이 까다로운만큼 완벽히 이해하고 넘어가길 바란다.



3. FrameLayout

같은 자리의 자식 뷰들을 겹치도록 놓고, VISIBLE, INVISIBLE, GONE 등의 옵션으로 교차하면서 보여줄 수 있음

아래쪽에서 선언된 뷰가 가장 위에 표시



주로 버튼클릭시 기존의 뷰를 숨기고 다른 뷰를 표시하는 탭기능에서 사용된다.

(텝1페이지 레이아웃과 2페이지 레이아웃을 인클루드하여 사용하는 방식 등)


소스코드에서는 View.setVisibility("GONE"); 형식으로 사용한다.


visible = 보이기  invisible = 뷰의 영역은 가지고 숨기기  gone = 뷰를 숨기고 영역도 해제함


직접 사용해보면서 차이점을 느끼기 바란다.


질문사항 있으면 댓글로 남겨주세요

-끝-



Android/View | Posted by 덩치 2013. 12. 24. 14:56

SurfaceView 구현 / 사용법

펌 OK (출처 표시), 상업적 이용 NO, 컨텐츠 변경 NO

SurfaceViewView를 상속받은 클래스로 Video Memory로 바로 접근하기 때문에 일반 View에서의 랜더링 

속도보다 빠르다.

일반 View는 많은 그리기 작업을 하면 메인 스레드의 자원을 다 잡아먹어버리기때문에 상당히 느려지게 되는데

이러한 단점을 보완하기 위한 클래스라고 보면 된다


우선 액티비티에 SurfaceHolder.Callback을 해 주고, add unimplemented methods를 해 준다.


public class DrawClass implements SurfaceHolder.Callback{


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}


@Override

public boolean onCreateOptionsMenu(Menu menu) {

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

return true;

}


@Override

public void surfaceChanged(SurfaceHolder holder, int format, int width,

int height) {

}


@Override

public void surfaceCreated(SurfaceHolder holder) {

}


@Override

public void surfaceDestroyed(SurfaceHolder holder) {

}

}


그럼 셋팅은 끝. 사용되는건 surfaceCreatedsurfaceDestoryed 정도가 되겠다.

surfaceCreated는 처음 서피스뷰가 생성될 때 호출되는데, 주의할점은 백그라운드 상태로 내려갔다가, 다시 올라오게 되면

surfaceview가 다시 created된다는점이다. created에서 thread를 실행시키는 작업을 할 경우

반드시 스레드가 동작중인지 여부를 먼저 확인해야한다. 그렇지않으면 익셉션 발생


surfaceChanged는 업데이트를 대비해 만들었다, 뭐라뭐라 하던데 잘 모르겠다. 사용하지않는듯하다.


이제 SurfaceView 구성은 하였고, 실시간으로 그리기를 실행하려면 Thread를 구동해야한다.


private Class PaintThread extends Thread {

public void run() {

while(!this.isInterrupted()){    //스레드가 인터럽트 될 때까지 반복 실행.

if (그리기 실행조건) {

//그리기 실행

doDraw();

}

}

}

}


나는 주로 드로우 관련부를 따로 만들어서 호출하는방식으로 사용한다.

비트맵을 그려보겠다. surfaceCreated에 다음과 같이 선언한다. (그 위에 Bitmap img, tempBitmap 전역변수로 선언해둔다)

팁 하나, 비트맵 이미지가 큰 경우 메모리를 상당히 많이 잡아먹어 종종 익셉션이 발생하게 되는데,

BitmapFactory.Options option = new BitmapFactory.Options();

option.inSampleSize = 1;

option.inPurgeable = true;

option.inDither = true;

이렇게 해 주면 비트맵이 먹는 메모리를 줄일 수 있다. 리사이클만으로는 감당이 안되는 경우가 생겨 찾다보니 이렇게 해주니 해결되더라. 이렇게 했을경우 단점은 잘 모르겠다. 고퀄리티를 요하는 작업이 아니었기때문에..

그리고 

tempBitmap = BitmapFactory.decodeResource(res, R.drawable.img30x30, option);

img = Bitmap.createScaledBitmap(tempBitmap, imgWidth, imgHeight, true);


private void doDraw() {

try {

canvas = mHolder.lockCanvas(); //그리기 준비

     int size = MainActivity.ARR_X.size();

     canvas.drawColor(Color.GRAY);  //배경색 설정

Paint p = new Paint();

p.setAntiAlias(true);

     canvas.drawBitmap(img, imgX, imgY, p);  //이미지를 X,Y위치에 그리기

catch (Exception e) {

}

finally {

mHolder.unlockCanvasAndPost(canvas); //그리기 종료

}

}


그리고 MainActivityxml에서


<패키지명.DrawClass

android:layout_width="500px"

android:layout_height="500px" />

와 같은식으로 호출한다.


여기까지가 SurfaceView 사용 방법이다.


참고로 위의 소스는 새로운 클래스를 만들어서 기존 액티비티에 영역추가하는식으로 사용한것이고

뷰와 마찬가지로 액티비티에서 바로 setContentView하여 적용 할 수도 있다.

문의점은 댓글 남겨주기바람