MATLAB을 통해 첫 번째 APP 디자이너 프로그램 (전자 사전)을 만들 수 있습니다.

참고 : 왼쪽 상단 모서리에 아이콘을 추가하는 방법
여기에 사진 설명 삽입
은 기사 끝에 있습니다. 다음은 원본 기사입니다.


오늘 제가하고 싶은 것은 간단한 전자 사전입니다. 효과는 다음과 같습니다.
여기에 사진 설명 삽입

여기에 사진 설명 삽입
참조 기사 : 자신 만의 전자 사전을 갖고 싶습니까? MATLAB으로 전자 사전을 작성하는 방법에 대한 자습서

1 앱 생성

제로 파운데이션이기 때문에. . . . 먼저 앱 디자이너를 여는 방법부터 시작해야합니다
. 새 앱 프로그램 (mlapp 파일 확장자) 을 생성하려면 새로 생성 → 생성 할 앱 (이미 mlapp 파일이 생성 된 경우 파일을 두 번 클릭하여 ) :
여기에 사진 설명 삽입
,
그 후 새로운 빈 앱을 생성하여 파일을 생성하도록 선택합니다.
여기에 사진 설명 삽입
실행을 클릭 한 후 여기에서 앱 이름을 변경할 수 있습니다.
여기에 사진 설명 삽입

2 컨트롤 생성 및 속성 설정

2.1 배경

구성 요소 관리자에서 구성 요소를 클릭하여 속성을 설정합니다.
여기에 사진 설명 삽입
오른쪽 의 속성 이 편집되면 코드가 중간에 자동으로 생성되고 왼쪽의 앱 표시 상자가 그에 따라 변경됩니다.
여기에 사진 설명 삽입
이 앱의 경우 UIfigure가 다음과 같이 수정되었습니다.

  • 배경색 변경 (Color)
  • 초기 위치 변경 (Position)
  • 앱 크기는 마음대로 조정할 수 없습니다 (크기 조정).
  • 앱 인터페이스의 왼쪽 상단 모서리에서 이름을 변경합니다 (이름).

여기에 사진 설명 삽입
여기에 사진 설명 삽입

2.2 태그 (사전 설명)

드래그하여 다른 구성 요소를 생성
합니다. 텍스트 영역은 사용 중일 때 편집 할 필요가 없으므로 레이블 만 사용하여 작업을 완료 할 수 있습니다.
여기에 사진 설명 삽입
드래그 앤 드롭하여 위치와 크기를 변경하거나 속성 수정자를 통해 입력 할 수 있습니다 . 값은 위치와 크기를 변경하지만 위치를 제외하고 변경해야하는 최종 속성은 다음과 같습니다.

  • 레이블 텍스트 (텍스트)
  • 텍스트 중심 (HorizontalAlognment)
  • 글꼴 크기 (FontSize)
  • 텍스트 글꼴 (FontName)
  • 굵은 텍스트 (FontWetght)
  • 텍스트 색상 (FontColor)

여기에 사진 설명 삽입

2.3 입력 상자 및 쿼리 버튼

입력 상자는 편집 가능한 텍스트 상자를 사용하며 왼쪽의 레이블은 삭제를 통해 삭제할 수 있습니다.
여기에 사진 설명 삽입
단순하게 유지하기 위해 버튼과 입력 상자에 너무 많은 속성을 설정하지 않았습니다.
여기에 사진 설명 삽입

2.4 쿼리 결과 상자

텍스트 표시 상자이기도하지만 복사의 편의를 위해 Label 컴포넌트 대신 텍스트 영역TextArea 컴포넌트를 사용 합니다.
텍스트 영역을 생성 한 후에 는 여전히 복사가 가능하도록 Editable을 취소하는 것이 좋습니다. , 그러나 콘텐츠는 앱 외부에서 수정할 수 없습니다.
여기에 사진 설명 삽입

단어 검색의 3 가지 원칙

Youdao Dictionary는 단어를 검색 할 때 링크로 이동하는 것을 발견했습니다. 링크에는 검색된 어휘가 포함되어 있습니다.
여기에 사진 설명 삽입
실제로 다른 어휘를 검색 할 때 링크는 중간의 작은 섹션 만 변경됩니다. 다른 검색어의 경우 방문 할 링크는 다음과 같습니다.

url = [ 'http://www.youdao.com/w/'search_word '/#keyfrom=dict2.top'];

search_word는 검색 할 어휘입니다. 링크를 획득 한 후
urlread (url)를 직접 사용 하여 HTML 페이지의 내용을 가져옵니다. 획득 형식은 다음과 같습니다. <div class = "trans-container"
여기에 사진 설명 삽입
사이의 내용을 찾았습니다.
> and </ ul> 이것이 우리가 원하는 것이므로 regexpi 함수를 통해 콘텐츠의이 부분을 찾아 추출하기 만하면됩니다. 여기에 사진 설명 삽입
코드의이 부분은 다음과 같습니다 (APP 버전으로 변환되지 않음).

function search_result=search(search_word)
        url=['http://www.youdao.com/w/' search_word '/#keyfrom=dict2.top'];
        complete_code=urlread(url);
        trans=regexpi(complete_code,'<div class="trans-container">');
        trans=trans(1);
        if ~isempty(trans)
            trans_end1=regexpi(complete_code,'</ul>');
            trans_end1(trans_end1<trans)=[];
            trans_end1=trans_end1(1);
            temp_data=complete_code(trans:trans_end1-1);
            delete_pos=regexpi(temp_data,'<li>');
            delete_pos=delete_pos(1);
            temp_data(1:delete_pos+3)=[];
            control=1;
            while(control)
                control=0;
                delete_li_pos=regexpi(temp_data,'<li>');
                if ~isempty(delete_li_pos)
                    delete_li_pos=delete_li_pos(1);
                    temp_data(delete_li_pos:delete_li_pos+3)=[];
                end
                delete_li_pos=regexpi(temp_data,'<li>');
                if ~isempty(delete_li_pos)
                    control=1;
                end
            end
            control=1;
            while(control)
                control=0;
                delete_li_pos=regexpi(temp_data,'</li>');
                if ~isempty(delete_li_pos)
                    delete_li_pos=delete_li_pos(1);
                    temp_data(delete_li_pos:delete_li_pos+4)=[];
                end
                delete_li_pos=regexpi(temp_data,'</li>');
                if ~isempty(delete_li_pos)
                    control=1;
                end
            end
            search_result=temp_data;
            
        end
    end

4 버튼 콜백

버튼을 눌러 입력 상자의 내용을 쿼리하고 싶습니다. 쿼리 버튼에 콜백 함수를 추가해야합니다.
여기에 사진 설명 삽입
콜백 함수에서 먼저 입력 상자에 텍스트를
여기에 사진 설명 삽입
가져와야합니다. 단어 쿼리를 복사합니다. 코드의 일부를 입력하고 결과 상자에 결과를 표시합니다.
여기에 사진 설명 삽입

코드 부분이 완성되었습니다!


################################################ ################################################ #####################################

5 APP 패키징 및 설치

패키징 인터페이스로 들어가려면 여기를 클릭하십시오.
여기에 사진 설명 삽입
새로 작성된 mlapp 파일을 메인 파일로 선택하고 이름을 변경하십시오.
이름은 설치 중에 그림과 같이 아이콘 아래에 표시됩니다 .
여기에 사진 설명 삽입
여기에서 계속 회전하면 몇 개 더 클릭하십시오 그러나 :
여기에 사진 설명 삽입
이번에 우리 프로그램은 우리 자신이 작성한 다른 함수 나 이미지를 호출하지 않았으므로 공유 리소스와 도움말 파일을 채울 필요가 없습니다.

5.1 설치 패키지 커버

설치 패키지의 표지는 오른쪽에서 선택할 수 있습니다 (선택 여부는 중요하지 않음). 여기에 사진 설명 삽입
예를 들어 색상 추출기 설치 패키지의 표지는 다음과 같습니다.
여기에 사진 설명 삽입

5.2 설명

채워진 설명은 다음 위치에 표시됩니다.
여기에 사진 설명 삽입
여기에 사진 설명 삽입

5.3 아이콘

소프트웨어 디스플레이 아이콘은 여기에서 변경할 수 있습니다.
여기에 사진 설명 삽입
여기에 사진 설명 삽입
일부 아이콘은 직접 만들 수 있습니다 .
여기에 사진 설명 삽입


위의 속성을 설정 한 후 Package를 클릭하여 패키징을 시작할 수 있으며 mlappinstall 파일이 생성되면 패키징이 종료됩니다.

5.4 앱 설치

다음과 같은 방법으로 mlappinstall을 선택하여 앱을 설치할 수 있습니다.
여기에 사진 설명 삽입
설치 효과는 다음과 같습니다.
여기에 사진 설명 삽입
설치가 완료된 아이콘을 클릭하여 직접 사용할 수 있습니다. 현재 앱의 소스 파일은 가질 수 없습니다. 그렇지 않으면 오류가 발생합니다.
현재 파일 클립을 변경하여 해결할 수 있습니다.


또한
APP 디자이너의 마법적인 작동에 대해 더 알고 싶다면 다음 기사를 읽을 수 있습니다.

이 문서에 표시된 mlapp 및 설치 패키지 파일 :
https://download.csdn.net/download/slandarer/15565335


기타 :
왼쪽 상단 모서리에 아이콘을 추가하는 방법 왼쪽 상단 모서리에 아이콘을 추가하려면,

  1. 먼저 ico 형식의 그림을 준비하고 브라우저에서 ico 형식으로 변환 할 많은 그림을 찾을 수 있습니다.
  2. ico 형식 그림을 mlapp 파일과 동일한 폴더에 넣습니다.
  3. mlapp 파일에 대한 startupFcn 콜백을 만듭니다 (startupFcn 콜백을 만드는 방법을 모르는 경우 시작에 대한 내 블로그를 읽을 수 있음).
  4. startupFcn에 다음 코드를 입력하고 코드에 표시된 위치 사진 이름과 uifigure 이름을 변경합니다.
%% 更改APP Designer LOGO图标
warning('off');
% 获取当前工程绝对路径(含工程名)
icopath=mfilename('fullpath');
% 查找最后一个斜杆的位置
i=findstr(icopath,'\');
% 去除工程文件名,得到路径
icopath=icopath(1:i(end));
% 加入logo图标文件名
icopath = [icopath,'这里写上ico文件的名字'];
rez = [];
	 while ~strcmp(rez,icopath)
     	try
        % 获取webwindow句柄
        win = struct(struct(struct(struct(app).这里写上UIfigure的名字).Controller).PlatformHost).CEF;
        % 指定LOGO文件路径
        win.Icon=icopath;
        rez = win.Icon;
        catch
        % 给图形(网页)更多时间加载
        pause(1);
        end
end

이런 식으로 왼쪽 상단 모서리 아이콘을 추가 할 수 있습니다.
여기에 사진 설명 삽입
코드의이 부분은 Matlab 앱 디자이너 에서 가져옵니다 . 왼쪽 상단 모서리 matlab 아이콘을 자신의 로고로 변경하는 방법은 무엇입니까? 문제 설명 아래에있는 Amygse의 답변

추천

출처blog.csdn.net/slandarer/article/details/108591667